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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

  • 相关阅读:
    python中kafka生产者和消费者实现
    bzip2压缩
    gzip压缩
    对目录、文件操作需要的权限
    Linux文件查找
    Linux文件种类与扩展名
    centos 文件权限与目录权限
    centos关机命令
    私有方法私有属性继承问题
    python3 中类的__del__方法
  • 原文地址:https://www.cnblogs.com/LeeYongze/p/2131887.html
Copyright © 2011-2022 走看看