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

Question

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

jsfiddle

Answer 1

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

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

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