zoukankan      html  css  js  c++  java
  • JS表格各行变色

    <head>
        <title></title>
        <script type="text/javascript">
            onload = function () {


                document.getElementById('btn').onclick = function () {
                    //这个是获取这个页面中所有的tr
                    // var trs= document.getElementsByTagName('tr');
                    //获取指定的表中的tr
                    var trs = document.getElementById('tb').getElementsByTagName('tr');
                    for (var i = 0; i < trs.length; i++) {
                        if (i % 2 == 0) {
                            trs[i].style.backgroundColor = '';//默认颜色
                        } else {
                            trs[i].style.backgroundColor = 'yellow';
                        }

                    }
                };
            };
        
        </script>
    </head>
    <body>
        <input type="button" name="name" value="表格隔行变色" id="btn" />
        <table border="1" id="tb">
            <tr>
                <td>周润发
                </td>
                 <td>刘德华
                </td>
                 <td>周星驰
                </td>
            </tr>
             <tr>
                <td>周润发
                </td>
                 <td>刘德华
                </td>
                 <td>周星驰
                </td>
            </tr>
             <tr>
                <td>周润发
                </td>
                 <td>刘德华
                </td>
                 <td>周星驰
                </td>
            </tr>
             <tr>
                <td>周润发
                </td>
                 <td>刘德华
                </td>
                 <td>周星驰
                </td>
            </tr>
             <tr>
                <td>周润发
                </td>
                 <td>刘德华
                </td>
                 <td>周星驰
                </td>
            </tr>
             <tr>
                <td>周润发
                </td>
                 <td>刘德华
                </td>
                 <td>周星驰
                </td>
            </tr>
        </table>
    </body>
  • 相关阅读:
    CSS实现DIV水平自适应居中
    jQuery实现鼠标拖动改变Div高度
    Word2013创建目录
    raw,cow,qcow,qcow2镜像的比较
    Chrome浏览器官方下载地址
    OLE/COM 对象查看器 & OLE常用术语
    VmWare为Fedora虚拟机扩展磁盘
    Linux常用命令
    项目经理与客户沟通的宜与忌
    转 FileStream Read File
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434860.html
Copyright © 2011-2022 走看看