jquery - 单击复选框时更改唯一的行表颜色

Question

我有一张这样的 table 。

    <table>
      <tr class="rowA baris">
       <td>A<td>
       <Td><input class="checkbox" type="checkbox"><td>
      </tr>
      <tr class="rowB baris">
       <td>B<td>
       <Td><input class="checkbox" type="checkbox"><td>
      </tr>
    </table>

然后我想要这样的结果 Result

我希望选中复选框的行将 CSS 背景颜色更改为浅灰色。我该怎么做？

当前使用此 JQuery:

  $('.checkbox').click(function () {
            if ($(this).is(":checked")) {

                $('.baris').attr('style', 'background-color: lightgrey;');
            }
        });

但所有行都变成浅灰色。

Answer 1

您应该使用.closest()获得正确的行

$('.checkbox').click(function () {
     var backgroundColor = $(this).is(":checked") ? "lightgrey;" : "";
     $(this).closest('tr').attr('style', 'background-color: '+ backgroundColor +'');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
      <tr class="rowA baris">
       <td>A<td>
       <Td><input class="checkbox" type="checkbox"><td>
      </tr>
      <tr class="rowB baris">
       <td>B<td>
       <Td><input class="checkbox" type="checkbox"><td>
      </tr>
    </table>