Using native js and jQuery to achieve interlaced color change of the table

Native js realizes table interlaced color change: use native js to manipulate DOM elements
HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>1. 使用节点树方式实现表格偶数行变色</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/3.css" />
<!--引入jQuery文件-->
<script src="./js/jquery-3.1.0.min.js"></script>
<style>.blue {background-color: #ccccff;}</style>
</head>
<body>
    <table id="data">
        <thead>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>入职时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>$3500</td>
                <td>2010-10-25</td>
                <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>$3400</td>
                <td>2010-12-1</td>
                <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td>
            </tr>
            <tr>
                <td>King</td>
                <td>$5900</td>
                <td>2009-08-17</td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">删除</a></td>
            </tr>
            <tr>
                <td>Scott</td>
                <td>$3800</td>
                <td>2012-11-17</td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">删除</a></td>
            </tr>
            <tr>
                <td>Smith</td>
                <td>$3100</td>
                <td>2014-01-27</td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">删除</a></td>
            </tr>
            <tr>
                <td>Allen</td>
                <td>$3700</td>
                <td>2011-12-05</td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">删除</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS style:

#data {
    width: 600px;
}

#data, td, th {
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
}

th, td {
    height: 28px;
}

#data thead {
    background-color: #333399;
    color: #ffffff;
}

Primitive js:

<script type="text/javascript">
    //根据id号查找到当前的表格
    var table=document.getElementById("data");
    //因为隔行变色不需要头部变色，所以在表格的下面又找到表格的tbody，因为一个表格可以有多个tbody所以要给它添加下标，找到第一个tbody。
    var tbody=table.getElementsByTagName("tbody")[0];
    //再找到tbody里面所有的tr标签
    var trs=tbody.getElementsByTagName("tr");
    //使用for循环遍历所有的tr
    for(var i=0;i<trs.length;i++){
        //判断当前的下标是奇数还是偶数，实现隔行变色
        if(i%2==0){
            trs[i].className="blue";
        }else{
            trs[i].style.backgroundColor="red";
        }
    }
</script>

Using jQuery to achieve interlaced color change is much simpler (when using jQuery, you need to import the jQuery file!):

<script type="text/javascript">
    $("#data>tbody tr:even").css("background-color","red");
    $("#data>tbody tr:odd").css("background-color","blue");
</script>

This is the difference between using native js and jQuery library, two lines of code can be done, but it is recommended to write in native js for beginners like me, and practice, because the bottom layer of jQuery is written in native js , the native writing is very slippery, then jQuery is also simple.

Using native js and jQuery to achieve interlaced color change of the table

Guess you like