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

JS表格各行变色的更多相关文章

  1. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  3. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  4. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  5. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  6. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  8. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. ### Hibernate中的事务与并发 ###

    **事务相关的概念** 1. 什么是事务 * 事务就是逻辑上的一组操作,组成事务的各个执行单元,操作要么全都成功,要么全都失败. * 转账的例子:冠希给美美转钱,扣钱,加钱.两个操作组成了一个事情! ...

  2. [Angular] NgRx/effect, why to use it?

    See the current implementaion of code, we have a smart component, and inside the smart component we ...

  3. html5-4 HTML5超链接、URL地址和表格

    html5-4 HTML5超链接.URL地址和表格 一.总结 一句话总结: 1.cellspace有什么用? 清除表格的单元格间距 26 <table border='1px' cellspac ...

  4. Linux网络编程——原始套接字能干什么？

    通常情况下程序员接所接触到的套接字(Socket)为两类: (1)流式套接字(SOCK_STREAM):一种面向连接的 Socket,针对于面向连接的TCP 服务应用: (2)数据报式套接字(SOCK ...

  5. 《图说VR》——HTC Vive控制器按键事件解耦使用

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53915229 作者:car ...

  6. 通过rinetd实现port转发来訪问内网的服务

    一.   问题描写叙述 通过外网来訪问内网的服务 二.   环境要求 须要有一台能够外网訪问的机器做port映射.通过数据包转发来实现外部訪问阿里云的内网服务 三.   操作方法 做port映射的方案 ...

  7. CSS知识总结之浏览器

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  8. error: invalid abbreviation code [25] for DIE at 0x0000003e in Assertion failed: (*offset_ptr == end_prologue_offset), function ParsePrologue, file /S

    error: invalid abbreviation code [25] for DIE at 0x0000003e in '/Users/mac/Desktop/MYiosfiles/test/X ...

  9. 学习鸟哥的Linux私房菜笔记（5）——目录

    一.目录 目录在文件类型上用d来表示,用 / 分割目录层 Linux操作系统 都有且仅有一个起始目录,我们用一个单独的 /来表示,称其为根目录. 对每一个Shell和操作环境,都有一个当前的工作目录. ...

  10. 一起学Python: 多线程-共享全局变量问题

    多线程-共享全局变量问题 多线程开发可能遇到的问题 假设两个线程t1和t2都要对全局变量g_num(默认是0)进行加1运算,t1和t2都各对g_num加10次,g_num的最终的结果应该为20. 但是 ...