javascript - 选中其中的复选框时如何包装表格的一行？

Question

我正在处理一个表，当单击该特定行中的复选框时，我必须在其中选择一行。只应选择选中复选框的行，或者说用红色突出显示它。我一直在尝试在 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>

Answer 1

当复选框内部更改其状态时，您可以在父级(祖先)tr 上切换 .highlight 类:

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