关于js中点击按钮选择复选框，tr背景变色和复原的问题

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> tr td{ border: 1px solid blue; } </style> <script> window.onload = function (){ var oBtn1 = document.getElementById("btn1"); //按钮 var oTable = document.getElementById("bg1"); // table表格 var oTr = oTable.getElementsByTagName("tr"); // tr 行 var iPu = oTable.getElementsByTagName("input"); // table下的input oBtn1.onclick=function (){ iPu[0].checked=true; } //我想点击按钮之后，tr[0]的背景变成红色，这个效果实现了，但是我取消复选框中的小对勾之后，tr的背景，不能复原成原本的样子，要实现这个效果怎么写呀 } </script> </head> <body> <input id="btn1" type="button" value="全选" / > <table id="bg1"> <tr> <td> <input type="checkbox" / >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, ex, eius. Magnam, beatae quibusdam. Nemo adipisci veniam earum minus similique tempora dolorum, animi dolorem, esse, rerum molestias architecto! Culpa, excepturi! </td> </tr> <tr> <td> <input type="checkbox" / >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, ex, eius. Magnam, beatae quibusdam. Nemo adipisci veniam earum minus similique tempora dolorum, animi dolorem, esse, rerum molestias architecto! Culpa, excepturi! </td> </tr> <tr> <td> <input type="checkbox" / >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, ex, eius. Magnam, beatae quibusdam. Nemo adipisci veniam earum minus similique tempora dolorum, animi dolorem, esse, rerum molestias architecto! Culpa, excepturi! </td> </tr> </table> </body> </html>如代码下方的疑问。

查看完整描述

3 回答

已采纳

千秋此意

TA贡献158条经验获得超187个赞

window.onload = function() {
    var oBtn1 = document.getElementById("btn1"); //按钮
    var oTable = document.getElementById("bg1"); // table表格
    var oTr = oTable.getElementsByTagName("tr"); // tr 行
    var iPu = oTable.getElementsByTagName("input"); // table下的input

    oBtn1.onclick = function() {
        this.flag = !this.flag;
        for (var i = 0; i < iPu.length; i++) {
            iPu[i].checked = this.flag ? true : false;
            changeBgColor(oTr[i], this.flag);
        }
    }
    //我想点击按钮之后，tr[0]的背景变成红色，这个效果实现了，但是我取消复选框中的小对勾之后，tr的背景，不能复原成原本的样子，要实现这个效果怎么写呀

    /**
     * oTr[idx]为当前点击的input元素所对应的那个tr元素
     * iPu[idx].checked为当前点击的input元素的checked属性值
     * 每次点击input时调用changeBgColor并传入上面两个参数
     */
    for (var i = 0; i < iPu.length; i++) { 
        iPu[i].onchange = function(idx) {
            return function() { // 用闭包解决事件回调里i值始终是iPu.length的问题
                changeBgColor(oTr[idx], iPu[idx].checked); 
            }
        }(i);
    }

    /**
     * 改变元素背景色
     * @param  {Object}  elem 需要设置背景色的DOM节点
     * @param  {Boolean} flag 为真时设置elem背景色为'#f00'(红),为假时设置elem背景色为'#fff'(白);
     */
    function changeBgColor(elem, flag) {
        elem.setAttribute('style', 'background: ' + (flag ? '#f00' : '#fff;'));
    }
}

我重新编辑把注释加上了~你看看吧

2 反对回复 2017-04-11