js实现点击表格的某个单元格对应的列改变颜色

html

 <table>
        <br>
        <br>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

css

 table {
      width: 800px;
      height: 280px;
 }

 table,
 tr,
 td {
    border: 1px solid;
    border-collapse: collapse;
}

js部分

        let tr = document.querySelectorAll('tr');
        let tds = document.querySelectorAll('td');
        //封装一个方法获取自己是父元素的第几个节点
        Object.prototype.getSum = function () {
            //得到所有子元素
            let arrSon = this.parentElement.children; //this谁调用指向谁，four调用指向four
            for (let i = 0; i < arrSon.length; i++) {
                if (this == arrSon[i]) {
                    return i
                }
            }
        }
        //实现隔列变色
        for (let i = 0; i < tr.length; i++) {
            //得到第i个tr的子元素
            let arr = tr[i].children;
            for (let j = 0; j < arr.length; j++) {
                //将第i个tr元素中的偶数子元素变色
                if (j % 2 == 0) {
                    arr[j].style.backgroundColor = '#666';
                }
            }
        }
        //循环遍历所有的td元素
        for (let i = 0; i < tds.length; i++) {
            //给所有的td元素设置点击事件
            tds[i].onclick = function () {
                //排他思想，将所有td元素的背景颜色制空
                for (let j = 0; j < tds.length; j++) {
                    tds[j].style.backgroundColor = '';
                }

                //得到当前td所在tr中的第几个
                let index = tds[i].getSum();
                for (let z = 0; z < tr.length; z++) {
                    //将第z个tr的第index子元素变色
                    tr[z].children[index].style.backgroundColor = '#666';

                }
            }

        }