JS实例-表格各行换色

我会带着你远行 2022-07-16 05:19 122阅读 0赞

![表格各行换色][20161007135321882]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>隔行换色tbody.rows方式</title>
            <style> table{ width:800px; border: 2px solid blue; } </style>
            <script> function init(){ var tbEle = document.getElementById("tb"); var len = tbEle.tBodies[0].rows.length; for(var i=0;i<len;i++){ if(i%2==0){ tbEle.tBodies[0].rows[i].style.backgroundColor="gray"; }else{ tbEle.tBodies[0].rows[i].style.backgroundColor="lightgray"; } } } </script>
        </head>
        <body onload="init()">
            <table align="center" border="1px" id="tb">
                <thead>
                    <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
                </thead>
                <tbody>
                  <tr><td>1</td><td>张三</td><td>22</td></tr>
                  <tr><td>2</td><td>李四</td><td>25</td></tr>
                  <tr><td>3</td><td>王五</td><td>27</td></tr>
                  <tr><td>4</td><td>赵六</td><td>29</td></tr>
                  <tr><td>5</td><td>田七</td><td>26</td></tr>
                  <tr><td>6</td><td>汾九</td><td>20</td></tr>
                </tbody>
            </table>
        </body>
    </html>

[20161007135321882]: /images/20220716/ae05e1b998574a52aa96178a29942890.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery实现表格隔行换色

> 黑马网课案例使用JQuery实现表格的各行换色注意： :gt(index) 为过滤选择器，选择大于指定索引的元素 :odd奇数，:enen偶数，都是

快来打我*/ 2023年09月23日 16:29/ 0 赞/ 55 阅读

相关鼠标事件之表格隔行换色

鼠标经过离开变色案例：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

末蓝、/ 2022年11月22日 10:13/ 0 赞/ 237 阅读

相关 JS实例-表格各行换色

![表格各行换色][20161007135321882] <!DOCTYPE html> <html> <head>

我会带着你远行/ 2022年07月16日 05:19/ 0 赞/ 123 阅读

相关 jQuery 各行变色，选中变色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

妖狐艹你老母/ 2022年06月15日 00:17/ 0 赞/ 169 阅读

相关 html中用js实现的表格隔行换色

写的时候把自己的表 //写的时候把自己的表的table加上id="tbl" <table id="tbl"> 代码如下： <!DOCTYPE ht

红太狼/ 2022年06月08日 05:37/ 0 赞/ 228 阅读

相关 js之表格隔行换色

步骤分析：第一步：确定事件(onload)并为其绑定一个函数第二步：书写函数(获取表格) 第三步：获取tbody里面的行数第四步：对tbody里面的行进行

╰+攻爆jí腚メ/ 2022年05月31日 08:51/ 0 赞/ 264 阅读

相关 vue实现动态列表点击各行换色

只是模拟一练习 v-for v-on v-bind的一个简单demo ![20180610151336654][] 代码思路：遍历出data里面的数据 v-f

客官°小女子只卖身不卖艺/ 2022年05月23日 13:52/ 0 赞/ 169 阅读

相关使用jQuery完成表格隔行换色

addClass(class):为每个匹配的元素添加指定的类名。 HTML 代码: <p>Hello</p> jQuery 代码: $("p").a

绝地灬酷狼/ 2022年04月21日 22:40/ 0 赞/ 260 阅读

相关 js隔行换色

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

r囧r小猫/ 2022年03月19日 02:38/ 0 赞/ 296 阅读

相关利用js实现表格隔行换色效果

利用js实现表格隔行换色效果首先我们来看一下实现的效果，如下图所示：思路：确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:...

小灰灰/ 2020年06月03日 12:45/ 0 赞/ 734 阅读