JavaScript实现GridView全选CheckBox时整行背景色修改失效问题求助

问题根因 #

1. ASP.NET的CheckBox服务器控件渲染到前端时，<input>复选框会被额外包裹一层<span>标签，你原有代码中获取GridView表格的层级计算存在偏差，虽然当前还能触发复选框选中逻辑，但后续很容易出现DOM查找错误。
2. 核心问题是你的GridView单元格<td>大概率通过<ItemStyle>配置、全局CSS规则等设置了独立的背景色，<tr>行元素的背景色优先级低于<td>的背景色，因此你给行设置的颜色被单元格样式覆盖，只有CheckBox所在列没有单独配置背景色才会显示变色效果。

修复方案 #

方案1（更推荐，用CSS类控制易维护） #

首先在页面样式中添加优先级更高的行样式，避免被单元格原有样式覆盖：

/* 选中行样式，加!important强制覆盖td自带背景 */
.grid-selected-row td {
    background-color: aqua !important;
}
/* 偶数行默认样式 */
.grid-even-row td {
    background-color: #e4edfb !important;
}
/* 奇数行默认样式 */
.grid-odd-row td {
    background-color: white !important;
}

然后修改JS代码，修正DOM层级获取逻辑，通过切换类名控制行样式：

function checkAll(objRef) {
    // 修正层级适配ASP.NET渲染的span节点：input -> span -> td -> 表头tr -> 表格
    var GridView = objRef.parentNode.parentNode.parentNode.parentNode;
    var inputList = GridView.getElementsByTagName("input");
    for (var i = 0; i < inputList.length; i++) {
        if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
            // 正确获取数据行tr：input -> span -> td -> 数据tr
            var row = inputList[i].parentNode.parentNode.parentNode;
            inputList[i].checked = objRef.checked;
            if (objRef.checked) {
                row.className = "grid-selected-row";
            } else {
                row.className = row.rowIndex % 2 == 0 ? "grid-even-row" : "grid-odd-row";
            }
        }
    }
}

方案2（无需修改CSS，直接操作单元格样式） #

如果不想新增CSS规则，也可以直接遍历行内所有单元格设置背景色，修改JS代码即可：

function checkAll(objRef) {
    var GridView = objRef.parentNode.parentNode.parentNode.parentNode;
    var inputList = GridView.getElementsByTagName("input");
    for (var i = 0; i < inputList.length; i++) {
        var row = inputList[i].parentNode.parentNode.parentNode;
        if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
            inputList[i].checked = objRef.checked;
            // 遍历当前行所有td设置背景
            var cellList = row.getElementsByTagName("td");
            if (objRef.checked) {
                for(var j=0; j<cellList.length; j++){
                    cellList[j].style.backgroundColor = "aqua";
                }
            } else {
                var bgColor = row.rowIndex % 2 == 0 ? "#e4edfb" : "white";
                for(var j=0; j<cellList.length; j++){
                    cellList[j].style.backgroundColor = bgColor;
                }
            }
        }
    }
}

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