我正在处理一个表,当单击该特定行中的复选框时,我必须在其中选择一行。只应选中选中复选框的行,或者说用红色突出显示它。我一直在尝试在JavaScript/jquery中使用包装函数,该函数在我的表中没有显示任何效果。我添加了我正在处理的代码部分。我该怎么做?
Response.Write "<table><tr><td class='cell1'>Project</td><td class='cell1'>Project ID</td><td class='cell1'>Finish</td></tr>"
WHILE NOT rs.eof
Response.Write "<tr><td class='celld'>"& rs(projectname") &".</td>"
Response.Write "<td class='celld'>"& rs("productID") &"</td>"
Response.Write"<td class='celld'><input var='"& rs("productID") &"' type='checkbox' id='finish' checked></td></tr>"
rs.MoveNext
WEND
<script>
$("#finish").onclick(function(){
$(".celld").wrap(" <div style='color:red'/>");
});
</script>
您可以在父(祖先)上切换.highlight
类tr
当内部复选框更改其状态时:
$(document).ready(function(){
$("table input[type='checkbox']").on('change', function(){
$(this).closest('tr').toggleClass("highlight");
});
});
Css:
.highlight{
background-color:red;
}
检查以下代码片段
$(document).ready(function() {
$("table input[type='checkbox']").on('change', function() {
$(this).closest('tr').toggleClass("highlight");
});
});
table {
border: 2px solid blue;
}
table td {
border: 1px solid green;
}
.highlight {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Select row
<input type="checkbox">
</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Select row
<input type="checkbox">
</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Select row
<input type="checkbox">
</td>
</tr>
</table>
我看到你正在使用jQuery,所以它实际上很容易。将更改时侦听器附加到复选框,每当触发更改时,选择其父tr
元素并对其应用类。
$('.checkbox').on('change', function() {
$(this).parents('tr').addClass('hightlight');
});
请注意,您还需要在样式中定义此类,以便它实际上直观地更改行。
你的代码有几个问题。首先,在循环中,您创建具有相同id
属性的多个元素,这是无效的。应使用公共类来选择元素。此外,input
没有var
属性,我认为这应该是value
.
从那里,您可以将单个事件处理程序附加到遍历 DOM 的所有元素以查找相关tr
。请注意,添加单击事件处理程序的 jQuery 方法是 click()
,而不是onclick()
。使用复选框,您还应该挂接到change
事件,以满足那些通过键盘浏览的人。您还可以使用 toggleClass()
根据复选框的 checked
属性的状态设置类。
最后,您不能将td
包装在div
中,因为这也是无效的。最好简单地向设置所需 CSS 规则的tr
添加一个类。像这样:
<table cellpadding="2" width="100%" cellspacing="0" border="1">
<tr>
<td class="tdcell1">Project</td>
<td class="tdcell1">Project ID</td>
<td class="tdcell1">Finish</td>
</tr>
<tr>
<td class="tdcelld">Project Name #1.</td>
<td class="tdcelld">ProductId #1</td>
<td class="tdcelld">
<input value="ProductId1" type="checkbox" class="finish">
</td>
</tr>
<tr>
<td class="tdcelld">Project Name #2.</td>
<td class="tdcelld">ProductId #2</td>
<td class="tdcelld">
<input value="ProductId2" type="checkbox" class="finish">
</td>
</tr>
</table>
$(".finish").click(function(){
$(this).closest('tr').toggleClass('red', this.checked);
});
.red { color: red; }
工作示例