Use JS click to achieve a cross-row/cross-column display effect

1. Target style

1. Realize even-numbered row color rendering

2. After clicking, it is hoped that the line that is clicked will be colored

3. Realize even column color rendering

 4. After clicking, the column of the clicked cell is expected to be colored (the third column of random points here) (actually the subscript is 2)

 2. Analysis

        To achieve cross-row display, you can traverse the row labels through the selected row

        To achieve cross-column display, because there is no column label, all you can do is select the cell of each row first, then find the parent (row label) of the cell, then traverse the row labels, and select the corresponding cell in each row. Let the cells in that row be colored.

3. Code implementation

1. Form part:

 <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 even-numbered row color rendering effect part:

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

3. The js click cross-row display effect part: to get each row first, then we need to use the exclusive design idea, first set the background color of all rows to white, and then set the column of the clicked cell to other colors

//跨行显色：获取所有行，偶数行显示
 //点击哪一行哪一行变色
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 even column color rendering effect part:

 //跨列显色,偶数行显色
 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 implements clicking on the cell to display the cross-column effect part:

To get each row and each cell first, then we have to use exclusive design ideas, first set the background color of all cells to white, and then set the column of the clicked cell to other colors

 //跨列显色,偶数行显色
        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";//被点击的列变色
                }
            }
        }

To find the subscript of any clicked cell, we can use the method encapsulated by this template object to achieve this function:

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