Question

我该怎么做？我有checkbox，当您点击/检查完整的td列时，会有背景颜色。然后，如果未选中，它将删除其背景颜色。此外，如果已经检查并且用户选中了另一个checkbox，则选中的一个将具有背景颜色，而前一个将没有背景颜色。

Answer 1

您应该只在HTML表格中添加col标签。然后，您可以设置col的背景颜色，并使列中的所有TD颜色为：

＆＃13;

function ChangeColColor(chkCol,col) {
   var varCol = document.getElementById(col);
   var varColor = "White";
   if (chkCol.checked == true) {
       varColor = "Red";
   }
   varCol.style.backgroundColor = varColor;
}

＆＃13;

<table>
  <colgroup>
    <col id="colA">
      <col id="colB">
        <col id="colC">
  </colgroup>
  <tr>
    <td>Column A <input id="chkColA" type="checkbox" onclick="ChangeColColor(this,'colA')"/></td>
    <td>Column B <input id="chkColB" type="checkbox" onclick="ChangeColColor(this,'colB')"/></td>
    <td>Column C <input id="chkColC" type="checkbox" onclick="ChangeColColor(this,'colC')"/></td>
  </tr>
  <tr>
    <td>Data A:1</td>
    <td>Data B:1</td>
    <td>Data C:1</td>
  </tr>
  <tr>
    <td>Data A:2</td>
    <td>Data B:2</td>
    <td>Data C:2</td>
  </tr>
  <tr>
    <td>Data A:3</td>
    <td>Data B:3</td>
    <td>Data C:3</td>
  </tr>
</table>

＆＃13;

Answer 2

尝试以下内容

$('input:checkbox').click(function() {
    $(this).parent().addClass('green')
    $('input:checkbox').not(this).prop('checked', false).parent().removeClass('green');
});

.green  {
    background-color: green;
    width: 50px;
    height: 50px;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tbody>
 
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>

  </tbody>
</table>

在选中时更改td的背景颜色

2 个答案: