本文用于用js来实现：点击table的某个单元格实现对应列的单元格变色

 一、表格CSS样式

 <style>* {margin: 0;padding: 0;}table {width: 800px;height: 300px;}table,tr,td {border: 1px solid;border-collapse: collapse;}</style>

 二、表格结构（六行七列）

//六行七列的表格 
<table><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>

 三、js部分

 <script>// 实现列变色// 先获取每个行let tr = document.querySelectorAll("tr");// 先找到每一行for (let i = 0; i < tr.length; i++) {// 找到各自行里的列let td = tr[i].querySelectorAll("td");// 找每行的单数列for (let j = 0; j < td.length; j += 2) {// 换背景颜色td[j].style.backgroundColor = 'lightblue';}}// 定义一个全局的td，获取每个单元格进行排他let td = document.querySelectorAll("td");// 实现点击对应列变色for (let i = 0; i < td.length; i++) {td[i].onclick = function () {// 点击时先实现所有单元格为无色for (let j = 0; j < td.length; j++) {td[j].style.backgroundColor = '';}// 单元格对应列变色// 每行找到对应下标的单元格变色for (let index = 0; index < tr.length; index++) {// 找到点击的单元格是父元素的第几个子元素，拿到对应的下标。let tdIndex = this.index();// 找到每行对应的下标的单元格，变色。let td = tr[index].querySelectorAll("td");td[tdIndex].style.backgroundColor = 'lightblue';}}}//封装方法，获取自己是父元素的第几个子元素节点,返回下标Object.prototype.index = function () {let arrSon = this.parentElement.children;for (let i = 0; i < arrSon.length; i++) {if (this == arrSon[i]) {return i;}}}</script>

实现效果：