js使用onclick方法实现点击表格整行/列变色

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>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                            </tr>
                            <tr>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                            </tr>
                            <tr>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                            </tr>
                            <tr>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                            </tr>
                            <tr>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                                          <td></td>
                            </tr>
                          
              </table>

一、完成跨行变色与点击整行变色

1、完成跨行变色思路： 循环所有行tr，选中奇数行变色

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

2、点击整行变色

思路： 遍历所有行，因为每一行都有可能被点到，然后需要使用排他设计思想，除了点击的那一行，其他都要变为初始色白色。

 let tr = document.querySelectorAll("tr");//获取所有行返回类数组
                   for (let i = 0; i < tr.length; i++) {
                       tr[i].onclick = function(){
                            for (let j = 0; j < tr.length; j++) {
                               tr[j].style.backgroundColor="white";
                               //排他思想                        
                            }
                            this.style.backgroundColor="pink";
                       }
                            
                   }

二、完成跨列变色与点击整列变色

1、完成跨列变色

思路： 使用两个循环嵌套，外循环设置每一行；内循环设置单行奇数单元格变色

 let table = document.querySelector("table");      
          let tbody = table.firstElementChild; //装tr的类数组
          //使用父类和子类选择tr的父节点元素或子节点元素
           for (let i = 0; i <tbody.children.length; i++) {
               for (let j = 0; j <tbody.children[i].children.length; j+=2) {
                     tbody.children[i].children[j].style.backgroundColor="pink";
                  }
          }

2、点击整列变色

思路1： 获取所有td,使用取余的方法选中整列设置·onclick·变色，同样要有排他思想

 let td = document.querySelectorAll("td");//所有td
                   let row =tbody.children.length+1;      //获取有多少列
                   console.log(row);
                   for (let i = 0; i <td.length; i++) {
                            td[i].onclick = function(){
                               for (let j = 0; j <td.length; j++) {
                                     td[j].style.backgroundColor="white";
                                    } 
                                    let a=i%row;
                                    for (let k = 0; k <td.length; k++) {
                                          td[a].style.backgroundColor="pink";
                                          a+=row;
                                          console.log(a);
                                    }
                            }       
                   }

缺陷： 虽然可以完成效果，但会有列出超出的报错，时间关系没有解决

思路2 封装一个方法，获取自己是父元素的第几个子元素节点来使整列变色

 Object.prototype.index = function () {
           let arrSon =  this.parentElement.children;
           for (let i = 0; i < arrSon.length; i++) {
                if(this == arrSon[i]){
                    return i
                }
           }
        }

结语： 时间关系没有完善，有错和拓展更多方法请写在评论区，谢谢！