【每日小练习】

最新推荐文章于 2024-08-30 20:29:15 发布

weixin_64697722

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量378

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_64697722/article/details/126752824

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个使用JavaScript实现的功能，当点击HTML表格中的某个单元格时，会高亮显示同一列的所有单元格。代码示例中，首先通过CSS为表格的偶数列设置背景色，然后通过JavaScript监听单元格的点击事件，点击后清除所有单元格的高亮，并将点击单元格所在列的所有单元格设为高亮。这个功能对于交互式的表格展示很有用。

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

基于js点击某个单元格显示一列

1.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>

2.JavaScript部分：

        let tr = document.querySelectorAll("tr");

        //跨列显色
        for (let i = 0; i < tr.length; i++) {
            let td = tr[i].children;
            for (let i = 0; i < td.length; i += 2) {
                td[i].style.backgroundColor = 'lightblue';
            }
        }

        //点击显示单列一行
        // 排他
        let td = document.querySelectorAll("td");//获取所有单元格
        for (let i = 0; i < td.length; i++) {
            td[i].onclick = function () {

                for (let i = 0; i < td.length; i++) {
                        td[i].style.backgroundColor = 'white';//去掉所有单元格变的颜色
                    }

                for (let i = 0; i < td.length; i++) {
                    //返回点击时的单元格在父元素的下标
                    let tdindex =this.index();
                    //拿到i行的所有单元格
                    let td = tr[i].children;
                    //在将所有行的同一下标的单元格变色
                    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;
            }
           }
        }

3.效果截图：