zoukankan      html  css  js  c++  java
  • Javascript之表格隔行变色 TC

    其实原理很简单,取到表格ID,获取表格内的<tbody>元素,然后在获取<tbody>元素下的所有<tr>元素。然后循环输出获取的<tr>元素。

    对<tr>元素的索引值除2取余,为0者设置背景色。

    HTML代码:

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

    Javascript代码:

     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元素的背景色
                    }
                }
    

      

    作者:Mr S.R Lee
    出处:http://www.cnblogs.com/LeeYongze
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

  • 相关阅读:
    转 oracle dual表
    笑话收集
    ls指令排序
    oracle中的连接
    linux系统磁盘突然满了解决方案
    转 Oracle temp空间管理
    11个JavaScript颜色选择器插件
    C#部分正则判断
    Script Encoder:screnc.exe加密解密
    JavaScript Tween算法及缓动效果
  • 原文地址:https://www.cnblogs.com/LeeYongze/p/2131887.html
Copyright © 2011-2022 走看看