如何防止全选Checkbox时修改表格thead行的颜色（纯JS实现）

嘿，我明白你遇到的困扰了——全选复选框的时候，表头那一行也跟着变了颜色，但你只想让tbody里的数据行变色对吧？这问题出在你当前的代码会选中页面上所有的复选框，包括thead里的那个全选框，然后连带着修改了它所在的<tr>样式。咱们用纯JS就能轻松搞定，给你两种可行的方案：

方案一：只遍历tbody内的复选框 #

直接把复选框的选择范围限定在tbody里，这样就不会碰到底部的表头复选框了。修改你的JS代码如下：

function allpart(chk) {
  // 只选中tbody里的复选框
  var checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
  if(chk.checked){
    for(var i=0;i<checkboxes.length;i++){
      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++){
      checkboxes[i].checked = false;
      checkboxes[i].parentNode.parentNode.style.background = "";
      checkboxes[i].parentNode.parentNode.style.color = "";
    }
  }
}

为什么这样管用？
document.querySelectorAll('tbody input[type="checkbox"]')只会选取<tbody>标签内的复选框，完全避开了thead里的全选框，自然不会修改表头行的样式。

方案二：判断当前行是否属于表头 #

如果你不想修改复选框的选择范围，也可以在循环里加个判断，跳过thead里的行：

function allpart(chk) {
  var checkboxes = document.getElementsByTagName('input');
  if(chk.checked){
    for(var i=0;i<checkboxes.length;i++){
      if(checkboxes[i].type == 'checkbox'){
        var tr = checkboxes[i].parentNode.parentNode;
        // 判断当前tr是否在thead里，是的话跳过
        if(tr.parentNode.tagName !== 'THEAD'){
          checkboxes[i].checked = true;
          tr.style.background = "#CC0000";
          tr.style.color = "#FFF";
        }
      }
    }
  }else{
    for(var i=0;i<checkboxes.length;i++){
      if(checkboxes[i].type == 'checkbox'){
        var tr = checkboxes[i].parentNode.parentNode;
        if(tr.parentNode.tagName !== 'THEAD'){
          checkboxes[i].checked = false;
          tr.style.background = "";
          tr.style.color = "";
        }
      }
    }
  }
}

逻辑说明
每次循环时，先拿到当前复选框所在的<tr>，然后检查它的父节点是不是<thead>——如果是，就跳过样式修改的步骤，只处理tbody里的行。

两种方案都能解决你的问题，选哪种看你个人习惯啦～

内容的提问来源于stack exchange，提问作者Kais