<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. 微擎 plugin 时间插件 图片上传插件不显示 报错 影响下面执行

    可能是版本更新导致的,之前可能不需要 load()->func('tpl');这个方法 现在加上 load()->func('tpl');应该就可以了

  2. ps如何制作gif（窗口->动画）（导出：存储为Web和设备所用格式）

    ps如何制作gif(窗口->动画)(导出:存储为Web和设备所用格式) 一.总结 1.点击窗口,选择动画 2.导出的时候:存储为Web和设备所用格式 二.ps如何制作gif 1.首先我们安装并打 ...

  3. Ajax基础与Json应用(二）

    九.jQuery 实现Ajax应用 1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url, ...

  4. SpringMVC ModelAndView跳转失效

    今天隔壁的兄弟遇到一个奇怪的问题,他写好了一个表单用post提交到了addNew.do 里面,然后利用 return new ModelAndView("forward:success.js ...

  5. [TypeScript] Create a fluent API using TypeScript classes

    You can create an easy to chain API using TypeScript classes. Learn about the thisreturn type annota ...

  6. 基于GTID多源复制扩展

    对一个运行很久的库做备份恢复建同步 不能使用xtrabackup   使用mysqldump导数据: mysqldump -S /data/mysql/3307/tmp/3307.sock --sin ...

  7. amazeui中的js插件有哪些（详解功能）

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  8. Opencv中使用Surf特征实现图像配准及对透视变换矩阵H的平移修正

    图像配准需要将一张测试图片按照第二张基准图片的尺寸.角度等形态信息进行透视(仿射)变换匹配,本例通过Surf特征的定位和匹配实现图像配准. 配准流程: 1. 提取两幅图像的Surf特征 2. 对Sur ...

  9. 利用for循环的嵌套输出图形--课后作业

    for (int i = 1; i <= 8; i++) { int a, b; for (a = 1; a < i; a++) Console.Write(" "); ...

  10. CentOS7查看开放端口命令

    CentOS7查看开放端口命令   CentOS7的开放关闭查看端口都是用防火墙来控制的,具体命令如下: 查看已经开放的端口: /tcp --permanent 命令含义: –zone #作用域 –a ...