Question

我正在处理一个表，在该表中，当单击该特定行中的复选框时，我必须选择一行。应该只选择选中复选框的行，或者用红色突出显示它。我一直在尝试在JavaScript / jquery中使用wrap函数，它在我的表中没有显示任何效果。我添加了我正在使用的代码部分。我该怎么做？

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>

Answer 1

当内部的复选框更改状态时，您可以在父（祖先）.highlight上切换tr课程：

$(document).ready(function(){

  $("table input[type='checkbox']").on('change', function(){

     $(this).closest('tr').toggleClass("highlight");

   });        
});

<强>的CSS：

.highlight{
  background-color:red;
}

检查以下代码段

＆＃13;

$(document).ready(function() {

  $("table input[type='checkbox']").on('change', function() {

    $(this).closest('tr').toggleClass("highlight");

  });
});

＆＃13;

table {
  border: 2px solid blue;
}
table td {
  border: 1px solid green;
}
.highlight {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

我看到你正在使用jQuery，所以它实际上非常简单。将一个on change listener附加到复选框，每当触发更改时，选择它的父tr元素并为其应用一个类。

$('.checkbox').on('change', function() {
    $(this).parents('tr').addClass('hightlight');
});

请注意，您还需要在样式中定义此类，因为它实际上可以直观地更改行。

Answer 3

您的代码存在一些问题。首先，在循环内部，您要创建具有相同id属性的多个元素，这是无效的。您应该使用公共类来选择元素。此外input没有var属性，我认为这应该是value。

从那里，您可以将单个事件处理程序附加到遍历DOM的所有元素，以查找相关的tr。请注意，添加点击事件处理程序的jQuery方法是click()，而不是onclick()。使用复选框，您还应该挂钩change事件以满足那些通过键盘浏览的事件。您还可以使用checked根据复选框的toggleClass()属性的状态设置类。

最后，您无法将td包裹在div中，因为这也是无效的。最好只在tr添加一个类来设置所需的CSS规则。像这样：

<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; }

Working example

当选中一个复选框时，如何包装表格的一行？

3 个答案: