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

最新推荐文章于 2023-03-01 20:44:09 发布

自愈''

最新推荐文章于 2023-03-01 20:44:09 发布

阅读量701

点赞数 1

分类专栏：前端文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/m0_68968891/article/details/126752729

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用HTML、CSS和JavaScript来创建一个表格，并实现了隔列变色的效果。通过CSS设置表格样式，JavaScript实现点击单元格时高亮显示该列所有单元格的功能，展示了前端开发中动态交互的基本实现。

摘要由CSDN通过智能技术生成

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';

                }
            }

        }