单击复选框时更改唯一的行表颜色答案

【问题标题】：Change the only row table color when i click the checkbox单击复选框时更改唯一的行表颜色
【发布时间】：2020-02-06 03:34:27
【问题描述】：

我有一张这样的桌子。

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

但所有行都变成浅灰色。

【问题讨论】：

标签： jquery css

【解决方案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>

【讨论】：

【解决方案2】：

您也可以考虑使用.addClass() 或.toggleClass()

$(function() {
  $(".baris input[type='checkbox']").change(function() {
    if ($(this).is(":checked")) {
      $(this).closest("tr").addClass("highlight");
    } else {
      $(this).closest("tr").removeClass("highlight");
    }
  });
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.highlight {
  background: #ccc;
}

<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>
  <tr class="rowC baris">
    <td>C</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
  <tr class="rowD baris">
    <td>D</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
  <tr class="rowE baris">
    <td>E</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
</table>

这样您可以使用类名并在页面的所有元素中保持一致。

【讨论】：

【解决方案3】：

只是纯 Html、内联 javascript 和 CSS

<td>
<input type="checkbox" onchange="closest('tr').classList.toggle('table-row-selected')">
</td>

.table-row-selected{
  background-color:#eee !important;
}

【讨论】：