表格隔行变色

最新推荐文章于 2022-09-27 19:39:43 发布

xbabyx

最新推荐文章于 2022-09-27 19:39:43 发布

阅读量227

点赞数

分类专栏： javascript

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

body里写：
<body οnlοad="js();">
<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>
</body>

head里写：
<script type="text/javascript">
        function js() {
            var item = document.getElementById("tb"); //获取id为tb的元素（table）
            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.backgroundColor = "#888"; //改变符合条件的tr元素的背景色
                }
            } //没有实现
        } 
    </script>