根据 onclick 复选框更改 td 背景颜色答案

【问题标题】：Change td background color based on onclick checbox根据 onclick 复选框更改 td 背景颜色
【发布时间】：2021-10-24 07:46:34
【问题描述】：

我有一个 javascript，如果我单击复选框，它将更改 td 背景颜色。下面是javascript

function onload() {
                var tds = document.getElementsByTagName("td");
                for(var i = 0; i < tds.length; i++) {
                    tds[i].onclick = 
                                    function(td) { 
                                        return function() { 
                                            tdOnclick(td); 
                                        }; 
                                    }(tds[i]); 
                }
                var inputs = document.getElementsByTagName("input");
                for(var i = 0; i < inputs.length; i++) {
                    inputs[i].onclick = 
                                   (inputs[i]); 
                }
            }
            function tdOnclick(td) {
                for(var i = 0; i < td.childNodes.length; i++) {
                    if(td.childNodes[i].nodeType == 1) {
                        if(td.childNodes[i].nodeName == "INPUT") {
                            if(td.childNodes[i].checked) {
                                td.childNodes[i].checked = false;
                                td.style.backgroundColor = "white";
                            } else {
                                td.childNodes[i].checked = true;
                                td.style.backgroundColor = "#E4E978";
                            }
                        } else {
                            tdOnclick(td.childNodes[i]);
                        }
                    }
                }
            }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

label{
    display:block;
    padding:20px;
}

.checkbx {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

.hidden {
    display: none;
}

<body onload="onload()">
  <table>
    <tr>
      <td>
      <label><input type="checkbox" class="hidden"></label>
      </td>
      <td>
      <label><input type="checkbox" class="hidden"></label>
      </td>
    </tr>
  </table>
</body>

颜色没有完全填满整个 td。我试过去掉标签，但还是一样。

这是我希望颜色填充整个 td 的示例：

screenshot of td

但我找不到解决方案。希望任何人都可以提供帮助。

【问题讨论】：

是错字吗？ TD 不能是 BODY 的直系子代... 你的意思是... <table><tbody>?
@RokoC.Buljan，td 在表中，我没有包含整个代码。我只包括最重要的。
我试图运行你的代码，它显示 inputOnclick 未定义。请在此处粘贴完整的代码。
@PHPGeek，好的我修改了代码，插入代码sn-p
@zerhez 它没有在完整的 td 中显示，因为您设置了填充，只需删除 td 和检查的填充

标签： javascript php html checkbox onclick

【解决方案1】：

Please replace your css with the following css and then check.
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
    }

    label{
        display:block;
        padding:20px;
    }

    .checkbx {
        text-align: center;
        /* center checkbox horizontally */
        vertical-align: middle;
        /* center checkbox vertically */
    }

    .hidden {
        display: none;
    }

【讨论】：

谢谢。可以，但是如果我在td中添加，如何在css中调整呢？