方法1：原生JavaScript

设置CSS

    table td{

        border:red solid 1px;

    }

.tr1{

    color:white;

        background: black;

    }

.tr2{

    color:black;

        background: white;

    }

    .tr2:hover{

        color:red;

        background: yellow;

    }

设置JavaScript

（1）获取tr标签

 var ctr=document.getElementById("tab").getElementsByTagName("tr");

（2）使用循环

 function fun(){

            for(i=0;i<ctr.length;i++){

                ctr[i].className=((i+1)%2>0)?"tr1":"tr2";

            }

        }

（3）调用js

window.onload=fun;

注意事项：该JavaScript代码需要在

加载完毕后执行。

点击查看完整代码 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>index</title>

<style>

table td{

        border:red solid 1px;

    }

.tr1{

    color:white;

        background: black;

    }

.tr2{

    color:black;

        background: white;

    }

.tr2:hover{

        color:red;

        background: yellow;

    }

</style>

</head>

<body>

    <table id="tab">

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

        <tr>

            <td>mllt</td>

            <td>mllt</td>

            <td>mllt</td>

        </tr>

    </table>

</body>

    <script>

        var ctr=document.getElementById("tab").getElementsByTagName("tr");

        function fun(){

            for(i=0;i<ctr.length;i++){

                ctr[i].className=((i+1)%2>0)?"tr1":"tr2";

            }

        }

    window.onload=fun;

    </script>

</html>

【Web前端】【JavaScript】实现表格隔行变色的更多相关文章

  1. JavaScript 实现表格隔行变色

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

  2. Javascript操作表格隔行变色

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

  3. JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  4. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

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

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

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

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

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

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

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

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

  9. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  10. JS实现表格隔行变色

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

随机推荐

  1. android系统启动流程- ServiceManager进程启动流程

    *注:基于Android11源码 ServiceManager进程是在init进程创建的,所以我们从init进程的main()开始分析: // 文件路径: system/core/init/main. ...

  2. /proc/zoneinfo

    root@pita2_mr813_tina35:/# cat /proc/zoneinfo Node 0, zone DMA per-node stats nr_inactive_anon 4749 ...

  3. 什么是 DOM

    百度: DOM 定义:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可 ...

  4. 在实例化对象的时候new关键字具体做了哪些操作？

    a 创建了一个空对象 {}b 通过原型链把空对象和构造函数连接起来__proto__ = prototype c 构造函数的this指向新对象,并执行函数体 d 判断构造函数的返回值,返回对象就使用该 ...

  5. 在Java程序中监听mysql的binlog

    目录 1.背景 2.mysql-binlog-connector-java简介 3.准备工作 1.验证数据库是否开启binlog 2.开启数据库的binlog 3.创建具有REPLICATION SL ...

  6. C# 并发控制框架：单线程环境下实现每秒百万级调度

    前言 在工业自动化和机器视觉领域,对实时性.可靠性和效率的要求越来越高.为了满足这些需求,我们开发了一款专为工业自动化运动控制和机器视觉流程开发设计的 C# 并发流程控制框架. 该框架不仅适用于各种工 ...

  7. 5.15 相约上海！2021 年度首届云原生 Meetup | KubeSphere & Friends

    时至今日,Kubernetes 虽然变成了云原生这套系统化方法论和开源技术的核心一环,但已经无法独立存在,而是与云原生生态中所有的技术形态息息相关.为了将云原生生态中的各个技术形态结合起来,帮助企业最 ...

  8. KubeSphere 3.3.2 版本正式发布！

    距离上一个版本 v3.3.1 发布,已经过了 3 个多月,今天我们很高兴宣布 KubeSphere v3.3.2 正式发布! 此版本由 68 位贡献者参与代码提交,感谢各位贡献者对 KubeSpher ...

  9. KubeSphere 3.3.0 离线安装教程

    作者:老Z,中电信数智科技有限公司山东分公司运维架构师,云原生爱好者,目前专注于云原生运维,云原生领域技术栈涉及Kubernetes.KubeSphere.DevOps.OpenStack.Ansib ...

  10. js获取nginx服务器时间

    前端页面js获取nginx服务器时间在实际开发中,我们通常要使用的是服务器端的时间,而不是本机电脑的时间,在js文件中直接通过new Date()获取的时间是本机电脑的系统时间,获取服务器时间的方法如 ...