Table thead color复选框选中/取消选中

Question

I have short issue about checkbox all with the table. I no want change color the first thead tr, how remove the color from the header?

I paste the code and I use only Javascript pure.

function allpart(chk){
    var parent = chk.parentNode.parentNode;
    var checkboxes = document.getElementsByTagName('input');
    var chkpart = document.getElementById('idpart');
    if(chk.checked){
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].type == 'checkbox'){
                checkboxes[i].checked = true;
                checkboxes[i].parentNode.parentNode.style.background = "#CC0000";
                checkboxes[i].parentNode.parentNode.style.color = "#FFF";
            }
        }
    }else{
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].type == 'checkbox'){
                checkboxes[i].checked = false;
                checkboxes[i].parentNode.parentNode.style.background = "";
                checkboxes[i].parentNode.parentNode.style.color = "";   
            }
        }
    }

Via html

 <table align="center" width="540px" class="tbcuadro"> <thead> <tr> <th width="5%"><input name="idpart[]" id="idpart" type="checkbox" onclick="allpart(this);"></th> <th width="75%" align="center">NAME</th> <th width="20%" align="center">NUMBER</th> </tr> </thead> <tbody> <tr> <td width="5%"><input name="idpart" type='checkbox'></td> <td width="75%">row 1</td> <td width="20%">row 2</td> </tr> <tr> <td width="5%"><input name="idpart" type='checkbox'></td> <td width="75%">row 1</td> <td width="20%">row 2</td> </tr> <tr> <td width="5%"><input name="idpart" type='checkbox'></td> <td width="75%">row 1</td> <td width="20%">row 2</td> </tr> </tbody> </table> 

Answer 1

This part of code will remove color and background of all th s.

var th = document.getElementsByTagName('th');
  for (var i = 0; i < th.length; i++) {
  th[i].style.color = "black";
  th[i].style.background = "white";
}

Also this part of code I think is wrong. I change the start index from 2 to 0

for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].type == "checkbox") {
    checkboxes[i].checked = false;
    checkboxes[i].parentNode.parentNode.style.background = "";
    checkboxes[i].parentNode.parentNode.style.color = "";
  }
}

Hope this helps you

 function allpart(chk) { var parent = chk.parentNode.parentNode; var checkboxes = document.getElementsByTagName("input"); var chkpart = document.getElementById("idpart"); if (chk.checked) { for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == "checkbox") { checkboxes[i].checked = true; checkboxes[i].parentNode.parentNode.style.background = "#CC0000"; checkboxes[i].parentNode.parentNode.style.color = "#FFF"; } } } else { for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == "checkbox") { checkboxes[i].checked = false; checkboxes[i].parentNode.parentNode.style.background = ""; checkboxes[i].parentNode.parentNode.style.color = ""; } } } var th = document.getElementsByTagName('th'); for (var i = 0; i < th.length; i++) { th[i].style.color = "black"; th[i].style.background = "white"; } } 

 <table align="center" width="540px" class="tbcuadro"> <thead> <tr> <th width="5%"><input name="idpart[]" id="idpart" type="checkbox" onclick="allpart(this)"></th> <th width="75%" align="center">NAME</th> <th width="20%" align="center">NUMBER</th> </tr> </thead> <tbody> <tr> <td width="5%"><input name="idpart" type='checkbox'></td> <td width="75%">row 1</td> <td width="20%">row 2</td> </tr> <tr> <td width="5%"><input name="idpart" type='checkbox'></td> <td width="75%">row 1</td> <td width="20%">row 2</td> </tr> <tr> <td width="5%"><input name="idpart" type='checkbox'></td> <td width="75%">row 1</td> <td width="20%">row 2</td> </tr> </tbody> </table> 

Answer 2

Use a conditional based on thead or tbody to set the color. eg if checkboxes[i].parent("tbody").is("tbody") then set the color.

Answer 3

If you want to remove the color from the header don't write:

checkboxes[i].parentNode.parentNode.style.background = "";

write just:

checkboxes[i].parentNode.parentNode.style.background = "transparent";