用js实现一个简单的跨列显色效果

1、目标样式

• 在一般情况下是每隔一行显示不同的颜色。
  
• 在点击后，希望被点击的列显示为特殊颜色（例如这里点击它的第二列）。
  

2、简单分析
首先要实现跨列显色最大的障碍就是我们的列表标签是通过行标签来嵌套列标签来实现的，也就是我们无法直接单独选中某一行，只能通过选中每个行标签中的同列的列标签来选中一列。

3、代码实现
html部分

 <table border="1px" width="800px" height="300px" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>  //想要多写几行就多写几个tr标签，多写几列就在tr标签内多写几个td标签。这里为6行7列

第一个效果要点：两次循环遍历列表中的所有tr标签，跨列显色即为奇数列和偶数列的颜色不同，数组从0开始，所以设置为偶数列的为特殊色。

        let td = document.querySelectorAll("td")
        let tr = document.querySelectorAll("tr");
        for (let i = 0; i < tr.length; i++) {
             let arr = tr[i].children; //td为tr的子元素节点，这里将每个行的元素节点写入数组arr中
         for (let j = 0; j < arr.length; j+=2) {
                 arr[j].style.backgroundColor = "black";         
             }       
         }

第二个效果要点：使用了排他设计的思想，先将所有的列的背景颜色都设置为白色，被点击的列设置为特殊色。

for (let a = 0; a < td.length; a++) {
          td[a].onclick=function(){
            let index = this.index();//this指向的是这个被点击的元素，调用此方法得到的是该元素所处的位置。
            for (let  b= 0;  b< td.length; b++) {
                td[b].style.backgroundColor = "white";//将所有单元格都设置为白色     
            }
            for (let k = 0; k < tr.length; k++) {
                tr[k].children[index].style.backgroundColor = "black";//使被点击的列变为黑色             
            }
         }         
     }

为了实现点击每列中的任意一个元素都能使该列变色，首先要知道元素自身所在的位置，下面封装的这个方法用来实现这个功能。

 Object.prototype.index = function () {
           let arrSon =  this.parentElement.children;//获取调用该方法的节点的父元素节点的所有子元素节点
           for (let i = 0; i < arrSon.length; i++) {
                if(this == arrSon[i]){
                    return i  //返回该元素在父元素节点的类数组中所处的位置
                }
           }
        }