js之表格隔列变色

Euniceing

已于 2022-09-07 20:17:57 修改

阅读量234

点赞数 1

分类专栏：笔记前端作业文章标签： javascript 前端 html5

于 2022-09-07 19:59:54 首次发布

本文链接：https://blog.csdn.net/euniceing/article/details/126752665

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

作业

4 篇文章 0 订阅

订阅专栏

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>

js部分

<script>
        // 获取自己是父元素的第几个子元素节点
        Object.prototype.index = function () {
            var arr = this.parentElement.children
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] === this) {
                    return i
                }
            }
        }

        // 获取行
        let tr = document.querySelectorAll("tr");

        // 获取单元格
        let td = document.querySelectorAll("td");

        // 表格列变色
        for (let i = 0; i < tr.length; i++) {

            let td1 = tr[i].querySelectorAll("td");

            // 奇数列变色
            for (let j = 0; j < td1.length; j++) {
                if (j % 2 == 0) {
                    td1[j].style.backgroundColor = "pink";
                }
            }
        }

        // 点击表格列变色
        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 a = 0; a < tr.length; a++) {
                    let x = this.index();//获取自己是tr的第几个子元素节点,返回下标
                    let td = tr[a].querySelectorAll("td");//找到行对应的单元格
                    td[x].style.backgroundColor = "pink";
                }

            }
        }


    </script>

结果：

单元隔列变色