【每日小练习】

最新推荐文章于 2025-01-04 19:57:29 发布

weixin_64697722

最新推荐文章于 2025-01-04 19:57:29 发布

阅读量415 前端文章标签： javascript

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

前端专栏收录该内容

5 篇文章 0 订阅

基于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.效果截图：