JS-表格隔行变色效果

最新推荐文章于 2024-04-14 08:44:26 发布

Annaluo

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript jquery jsp html dom

本文链接：https://blog.csdn.net/Annaluo/article/details/77987675

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果描述：使特定的表格隔行变色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行变色</title>
    <script src="../libs/jquery.js"></script>
</head>
<body>
<table id="tb">
    <tbody>
    <tr><td>第一行</td><td>第一行</td></tr>
    <tr><td>第二行</td><td>第二行</td></tr>
    <tr><td>第三行</td><td>第三行</td></tr>
    <tr><td>第四行</td><td>第四行</td></tr>
    <tr><td>第五行</td><td>第五行</td></tr>
    <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
</table>
<script>
    var item = document.getElementById("tb");        //获取ID对tb的元素
    var tbody = item.getElementsByTagName("tbody")[0];   //获取表格的第一个tbody元素
    var trs = tbody.getElementsByTagName("tr");     //获取tbody元素下的所有tr元素
    for(var i=0;i<trs.length;i++){      //循环tr元素
        if(i%2==0){             //取模
            trs[i].style.background = "#006633";       //改变符合条件的tr元素的背景色
        }
    }
</script>
</body>
</html>

Annaluo

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS-表格隔行变色效果

效果描述：使特定的表格隔行变色。代码如下：表格隔行变色第一行第一行第二行第二行第三行第三行第四行第四行第五行第五行第六行第六行 var item = document.getElementById("tb"); //获取I
复制链接

扫一扫