使用 html 中的复选框切换表格上的颜色

Toggling colour on a table using check boxes in html

本文关键字：表格 颜色 复选框 html 使用      更新时间：2023-09-26

所以我有这样的表格

<table class="rest_tab" border="1">
<tbody><tr><th>Times</th><th></th><th></th></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td><td align="right"><input  type="checkbox" class="selectAll" id="Checkbox5" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td></tr>
</tbody></table>

演示：

$(document).ready(function() {
  $('.pretty tr').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
    $(this).toggleClass('red');
  }, function() {
    $(this).toggleClass('red');
    $(this).find(':checkbox').attr('checked', false);
  });
});
table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #00cccc;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
table td:hover {
  background: #C1FFC1;
}
table td:click {
  background: #fcc;
}
table td:hover {
  color: #000;
}
table th,
table td {
  color: #999;
  border: 1px solid #eee;
  padding: 12px 35px;
  border-collapse: collapse;
}
table th {
  background: #00cccc;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}
table th.last {
  border-right: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rest_tab" border="1">
  <tbody>
    <tr>
      <th>Times</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox5" on=""></td>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td>
    </tr>
  </tbody>
</table>

我希望能够，而不是只是在悬停时更改颜色，同时选中表中每个框的复选框时保留颜色。

我已经尝试了一段时间，无法让 js 做我想做的事，任何帮助将不胜感激。

有一个这样的 css 规则，它将帮助您切换复选框选择

.selected{
    background-color: #C1FFC1;
}

在你的js中，你可以做这样的事情 

$('.selectAll').change(function(){
  $(this).closest('td').toggleClass('selected');
});

更新了您的 jsfiddle 演示

$(document).ready(function () {
     $('.selectAll').change(function(){
        $(this).closest('td').toggleClass('selected');
    });
});
table {
    font-family:'Arial';
    margin: 25px auto;
    border-collapse: collapse;
    border: 1px solid #eee;
    border-bottom: 2px solid #00cccc;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
table td:hover {
    background: #C1FFC1;
}
table td:click {
    background: #fcc;
}
table td:hover {
    color: #000;
}
table th, table td {
    color: #999;
    border: 1px solid #eee;
    padding: 12px 35px;
    border-collapse: collapse;
}
table th {
    background: #00cccc;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
}
table th.last {
    border-right: none;
}
.selected{
    background-color: #C1FFC1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rest_tab" border="1">
    <tbody>
        <tr>
            <th>Times</th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox4" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox5" on="">
            </td>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox7" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox8" on="">
            </td>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox10" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox11" on="">
            </td>
        </tr>
    </tbody>
</table>

希望这有帮助

相关文章：