使用原生js和jQuery实现表格的隔行变色

原生js实现表格隔行变色：利用原生js操作DOM元素
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样式：

#data {
    width: 600px;
}

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

th, td {
    height: 28px;
}

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

原生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>

利用jQuery实现隔行变色就要简单很多了（使用jQuery时要引入jQuery文件哦！）：

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

这就是使用原生js和jQuery库之间的区别，两行代码就可以搞定了，但是建议向我这样的小白，还是多用原生js写写，练一练，因为jQuery的底层就是原生js写的，原生的写的很溜了，那么jQuery也就简单了。

使用原生js和jQuery实现表格的隔行变色

猜你喜欢