Change td background color based on onclick checbox

Question

I have a javascript where it will change the td background color if I click the checkbox. Below is the 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>

The color didn't fully fill the whole td. I've tried remove the label, but it's still the same.

This is example how I want the color to fill the whole td:

screenshot of td

But I can't find the solution. Hope anyone can help.

Answer 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;
    }

Change td background color based on onclick checbox

Question

1 answers

solution1
0 ACCPTED 2021-08-24 04:28:16

Change td background color based on onclick checbox

Question

1 answers

solution1 0 ACCPTED 2021-08-24 04:28:16

solution1
0 ACCPTED 2021-08-24 04:28:16