原生js实现table表格的各行变色功能

Posted 2020-10-13 yingleiming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现table表格的各行变色功能相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现各行变色</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #studentCore{
            width:300px;
            margin:0 auto;
        }
        table{
            border-collapse: collapse;
        }
        td,th{
            text-align: center;
            padding:3px 5px;
            border:1px solid #ccc;
        }
        th{
            background-color: lightsteelblue;
        }
        .hightLight{
            background-color: pink;
        }
    </style>
</head>
<body onload="setTableColor()">

<div id="studentCore">
    <table>
        <thead>
            <tr>
                <th>Sname</th>
                <th>Score</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>明明</td>
                <td>50</td>
            </tr>
            <tr>
                <td>静静</td>
                <td>60</td>
            </tr>
            <tr>
                <td>日日</td>
                <td>65</td>
            </tr>
            <tr>
                <td>李磊</td>
                <td>70</td>
            </tr>
            <tr>
                <td>韩梅梅</td>
                <td>75</td>
            </tr>
            <tr>
                <td>杨幂</td>
                <td>80</td>
            </tr>
            <tr>
                <td>范冰冰</td>
                <td>85</td>
            </tr>
        </tbody>
    </table>
</div>


<script src="js/jquery-3.2.1.min.js"></script>
<!--方法一-->
<script>
    var data=document.getElementById("studentCore");
    var trs=data.querySelectorAll("tbody>tr");
    console.log(trs);
    for (var i=0;i<trs.length;i++){
       i%2!=0&&(trs[i].className="hightLight");
    }
</script>
<!--方法二-->
<script>
    function setTableColor() {
        var data=document.getElementById("studentCore");
        var trs=data.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            var j=i+1;
            if(j%2==0){
                trs[i].style.background="pink";
            }else{
                trs[i].style.background="yellow";
            }
        }
    }
    setTableColor();
</script>
</body>
</html>

以上是关于原生js实现table表格的各行变色功能的主要内容，如果未能解决你的问题，请参考以下文章

使用原生JS实现表格数据的翻页功能

js Table 表格选中一行变色并获取该行值

表格隔行变色js代码，创建属性

DOM设置表格隔行变色js代码及鼠标悬停在哪行，哪行字体就加粗效果

jQuery练习--[实现左移右移功能,实现列表动态新增,删除功能；实现表格隔行变色,选中时高亮显示.]

iView中表格(Table)添加点击行展开扩展说明的功能