使用JS实现跨列显色

一、题目要求

  使用click点击事件实现对表格跨行显示(列在js中是用td表示并且称为单元格 )

   1）先设置一个6行7列的表格（随便自己设置）

   2）基础样式为单数列全部默认显示（有一个底色） 

   3）要求点击随便那列，那列就显色，并且其他列不显色。

难点：

  1）如何解决点击一个单元格其所在列的所有单元和显色，而其他列不显色。

二、思路

  1）先遍历所有行(获取的是一个类数组)，然后将每行的偶数列显色（即下标为0，2 ，···）。

  2）再获取每个单元格（td）（这里是类数组）

注意：获取单元格不能将偶数项（下标）设置为点击显色。因为获取的单元格是所有行和列组成的（第二行的第一个会被当做下标为7的奇数，所以与题目有悖）

 3）对单元格设置点击事件，并且设置排他事件。（排他事件是指点击这个单元格其他单元格不显色）

 4）将点击后的单元格设置一个方法让他知道自己为第几行的第几个元素。

封装的方法：

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

三、结果展示