DOM操作案例1-点击，使表格的颜色切换（点击单元格，整行或整列颜色切换）

春意迟迟、

已于 2022-07-15 20:02:24 修改

阅读量323

点赞数

文章标签：前端 javascript

于 2022-07-15 19:11:44 首次发布

本文链接：https://blog.csdn.net/qq_58167492/article/details/125791505

版权

有三个案例：静态的表格颜色的隔行显示、点击单元格，单元格所在的整行进行颜色切换、点击单元格，单元格所在的整列进行颜色切换。

统一用这个结构写案例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #table1 {
            border: 1px solid black;
        }

        td {
            border: 1px solid black;
            width: 60px;
            height: 55px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 快捷生成4行6列表格：tr#tr$*4>td#td${$}*6 再Tab键 -->
    <table id="table1" cellspacing="0">
        <tr id="tr1">
            <td id="td1">1</td>
            <td id="td2">2</td>
            <td id="td3">3</td>
            <td id="td4">4</td>
            <td id="td5">5</td>
            <td id="td6">6</td>
        </tr>
        <tr id="tr2">
            <td id="td1">1</td>
            <td id="td2">2</td>
            <td id="td3">3</td>
            <td id="td4">4</td>
            <td id="td5">5</td>
            <td id="td6">6</td>
        </tr>
        <tr id="tr3">
            <td id="td1">1</td>
            <td id="td2">2</td>
            <td id="td3">3</td>
            <td id="td4">4</td>
            <td id="td5">5</td>
            <td id="td6">6</td>
        </tr>
        <tr id="tr4">
            <td id="td1">1</td>
            <td id="td2">2</td>
            <td id="td3">3</td>
            <td id="td4">4</td>
            <td id="td5">5</td>
            <td id="td6">6</td>
        </tr>
    </table>
</body>

（1）静态的表格颜色的隔行显示：

<script>
    //获取每一行，存入trs这个类数组里面
    //奇数行显示粉色，偶数行蓝色
    (() => {
        //获取每一行，存入trs这个类数组里面
        var trs = document.querySelectorAll("#table1 tr")
        console.log(trs)
        for (let i = 0; i < trs.length; i++) {
            //当余数为0是，判定为false，就不执行if语句
            if (i % 2) {
                trs[i].style.backgroundColor = "lightblue"
            } else {
                trs[i].style.backgroundColor = "lightpink"
            }
        }
    })() //函数调用，也就是运行
</script>
</html>

（2）点击单元格，单元格所在的整行进行颜色切换：

<script>
    (()=>{
        var trs=document.querySelectorAll("#table1 tr")
        for(let i=0;i<trs.length;i++){
            trs[i].onclick=function fn(){
                //排它思想
                trs.forEach((el)=>{
                    el.style.backgroundColor="white"
                })
                trs[i].style.backgroundColor="lightblue"
            }
        }
    })()
</script>
</html>

（3）点击单元格，单元格所在的整列进行颜色切换：

<script>
    Object.prototype.indexof1=function(){
        var arr=this.parentElement.children
        for(let i=0;i<arr.length;i++){
            if(arr[i]===this){
                return i
            }
        }				 
    }
</script>
<script>
    //获取页面元素
    var tab = document.querySelector("#table1")
    var trs = document.querySelectorAll("tr")
    var tds = document.querySelectorAll("td")
    // console.log(tds)
    //循环每次点击
    for (let i = 0; i < tds.length; i++) {
        //给每个表格绑定点击事件
        tds[i].onclick = function fn() {
            //排它思想：给每个单元格设置为白色
            tds.forEach((el) => {
                el.style.backgroundColor = "white"
            })
            //获取点击的单元格的下标
            let dianji=tds[i].indexof1()
            //将每一行的单元格的样式设为浅粉色
            trs.forEach((el)=>{
                el.children[dianji].style.backgroundColor='lightpink'
            })
        }
    }
</script>
</html>