<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. Spring-boot更改成war包的方式

    转载至:  https://blog.csdn.net/zhuwei_clark/article/details/82114102  Step1 修改启动类 Step2 修改配置文件为properti ...

  2. 【codeforces 742A】Arpa’s hard exam and Mehrdad’s naive cheat

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. Ajax的get、post和ajax提交

    JQuery.get(url,[data],[callback],[type]) []里面的参数是可选的,不是必填的. [data]:带发送的key/value数据. [callback]:载入成功时 ...

  4. 【hdu 1067】Gap

    Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission( ...

  5. Oracle数据库零散知识03

    21,存储过程,简化复杂操作,增加数据独立性,提高安全性,提高性能 与函数创建对比: create or replace function fun_01(v_01 in number) return ...

  6. hive 3.1.0 安装配置

    环境: hadoop 3.1.1 hive 3.1.0 mysql 8.0.11 安装前准备: 准备好mysql-connector-java-8.0.12.jar驱动包 上传hive的tar包并解压 ...

  7. WPF-- 合并资源字典

    原文:WPF-- 合并资源字典 1.        合并多个外部资源字典成为本地字典   语言 XAML 示例代码 <Page.Resources>   <ResourceDicti ...

  8. 关于提高UDP发送效率的方法

    UDP的发送效率和什么因素有关呢? 直观觉得,UDP的切包长越大,应该发送效率越高(最长为65536).可是依据实际測试和在网上查到的资料的结果,包长度为1024为发送效率最高. 这样的结果让人感到疑 ...

  9. uwp - 做一个相对炫酷的动画按钮/按钮动画

    原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...

  10. 1.node 在node中 进行包与包之间函数的调用 module.exports

    本文参考学习了廖雪峰的大作 模块 但是廖的文章只模块只有一个函数,在此演示一个模块中有两个函数,在另外一个函数中是如何去调用的 //hello.js包中的内容'use strict'; var s=' ...