js编写跨列显色

使用js代码使得点击跨列变色

对于一个表格，首先默认其双数行的颜色，然后再通过点击事件使得，选中的元素的一整列的颜色都一起改变。

创建一个表格

首先在body标签里面创建一个7行7列的表格，可以通过快捷键tr>td*7来实现，一行的设计，然后再复制粘贴这一行即可。再给表格设置一下样式，包括width，height，border，cellspace等

实现默认的偶数行的背景颜色

要实现默认双数行的背景颜色，需要注意的是不能直接遍历整个表格的单元格来去双数的单元格设置颜色，这样会出现花色紊乱的情况。需要将一行看成一个整体，然后再这个一行的整体中选中双数的单元格，改变其颜色。实现的具体步骤为：
1.首先获取到这个表格的每一行，并且通过应该变量trs，来保存。
2.for循环遍历这一行的数据，将一行中单元格的数据用Sons保存下来
3.然后再遍历这一行中所有的单元格，当单元格的下标可以被2整除的时候，表示这个单元格所在的列是偶数列。然后将这个下标所在的单元格的背景颜色改变即可。当外层的循环结束的时候，每一行中偶数列的单元格的背景就全部都被改变了，就实现了偶数列变色的效果。

let trs = document.querySelectorAll("tr");
        for (let i = 0; i < trs.length; i++) {
            let Sons = trs[i].children;
            for (let j = 0; j < Sons.length; j++) {
                if(j%2 == 0){
                    Sons[j].style.backgroundColor = "pink";
                }
            }
        }

点击单元格，将单元格所在列的颜色改变

主要的实现思想是，排他设计思想。首先获取到所有的单元格，然后给所有的单元格绑定一个点击事件；然后进行排他操作，即给所有的单元格都设置一个默认的背景颜色；然后封装一个函数，可以返回自己在父级元素中所在的位置（后面在讲如何封装）。得到返回值以后，遍历整个表格中的单元格，获取到被点击的单元格，然后利用获得的返回值，将其他行中的同样位置的单元格颜色进行设置。

let tds = document.querySelectorAll("td");
        for (let m = 0; m < tds.length; m++) {
            tds[m].onclick = function(){
                //排他
                for (let n = 0; n < tds.length; n++) {
                    tds[n].style.backgroundColor = "";
                }
                //设置自己
                let num = tds[m].index();
                // console.log(num);
                for (let l = 0; l < trs.length; l++) {
                    trs[l].children[num].style.backgroundColor = "pink";
                }
            }
        }

封装一个可以返回自己在父级元素中位置的函数

首先这个函数是封装在Object对象的原型对象上的，这样所有的对象都可以进行访问。首先获取父元素中所有的元素节点，并且存放在Sons中。然后通过遍历来取出来，如果有和调用者相同的子元素，就返回这个子元素的下标即可。

Object.prototype.index = function () {
    // 获取父元素所有的子元素节点
    let Sons = this.parentElement.children;
    // 遍历取出
    for (let i = 0; i < Sons.length; i++) {
        // 同调用者比较
        if (Sons[i] == this) {
            return i
        }
    }
}

执行的结果

点击第三行第四列的单元格的结果图:

默认的样式（选中下标为偶数列）