用JS点击实现一个跨行/跨列显示的效果

一、目标样式

1、实现偶数行显色

2、在点击之后，希望被点击那一行都显色

3、实现偶数列显色

4、在点击之后，希望被点击单元格的那一列都显色（这里随机点的第三列）（实则下标为2）

二、分析

要实现跨行显示，可以通过选择的那一行，遍历行标签就可以实现

要实现跨列显示，因为没有列标签，所有只能先通过选中每一行的单元格，再去寻找单元格的父级（行标签），然后遍历行标签，选中每一行里面的对应单元格，让那一行的单元格都显色。

三、代码实现

1、表格部分：

 <table border="1px" cellspacing="0px" style="height:300px;width: 800px;">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
//想要几行几个单元格可以自己添加

2、js偶数行显色效果部分:

 let rows = document.querySelectorAll("tr");
 for (let i = 0; i < rows.length; i++) {
            //偶数行显示
            if (i % 2 == 0) {
                rows[i].style.backgroundColor = "pink";
            }
 }

3、js点击跨行显示效果部分：要先获取每一行，然后我们要使用排他设计思想，先将所有的行的背景颜色都设置为白色，然后被点击单元格那一列设置为其他颜色

//跨行显色：获取所有行，偶数行显示
 //点击哪一行哪一行变色
let rows = document.querySelectorAll("tr");
for (let i = 0; i < rows.length; i++) {
           
 //设置点击功能
     rows[i].onclick = function () {
      //排他
     for (let j = 0; j < rows.length; j++) {
          rows[i].style.backgroundColor = "white";
        }
     //设置自己
     rows[i].style.backgroundColor = "pink";
       }
  }

4、js偶数列显色效果部分：

 //跨列显色,偶数行显色
 let trs = document.querySelectorAll("tr");
        for (let i = 0; i < trs.length; i++) {  //行
            let tds = trs[i].children;//选择每一行里面的单元格
            for (let j = 0; j < tds.length; j++) { //单元格
                //偶数列显色
                if (j % 2 == 0) {
                    tds[j].style.backgroundColor = "pink";
                }

            }

        }

5、js实现点击单元格显示跨列效果部分：

要先获取每一行和每一个单元格，然后我们要使用排他设计思想，先将所有的单元格的背景颜色都设置为白色，然后被点击单元格那一列设置为其他颜色

 //跨列显色,偶数行显色
        let trs1 = document.querySelectorAll("tr");
        let tds1 = document.querySelectorAll("td");
     
        //获取所有单元格来判断
        for (let i = 0; i < tds1.length; i++) {
            //设置点击单元格
            tds1[i].onclick = function (){ 
            //排他
                for(let j=0;j<tds1.length;j++){
                    tds1[j].style.backgroundColor="white";
                }
                //设置自己
                let newindex=tds1[i].index();//找到点击的单元格位于这一行的第几个，再调用找下标的方法找到所在位置 
                console.log(newindex);//打印看看位于当前行的第几个
                for(let k=0;k<trs1.length;k++){//找到行，然后对应行里面的单元格的下标，使之变色
                    trs1[k].children[newindex].style.backgroundColor="pink";//被点击的列变色
                }
            }
        }

想要找到被点击任意单元格的下标，我们可以用这个模板对象封装的方法实现这个功能：

 //模板对象：找我们想要的下标
        Object.prototype.index = function () {
            let sons = this.parentElement.children;//this指向点击的单元格
            for (let i = 0; i < sons.length; i++) {
                if (sons[i] == this) {
                    return i
                }
            }
        }

用JS点击实现一个跨行/跨列显示的效果

猜你喜欢