方法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. /proc/zoneinfo

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

  2. 6款支持C#语言的AI辅助编程工具，开发效率提升利器！

    前言 在这个AI迅速发展的阶段,涌现出了一大批好用的AI辅助编程工具.AI辅助编程工具能够提高开发效率.改善代码质量.降低bug率,是现代软件开发过程中的重要助手.今天大姚给大家分享6款AI辅助编程工 ...

  3. 2024年2月中国数据库排行榜：PolarDB夺魁首登顶，TiDB攀升回探花

    银装素裹覆大地,春意初醒待来临.2024年2月墨天轮中国数据库流行度榜单出炉,表现最亮眼的无疑是PolarDB,其自23年7月以来一路高歌猛进,此次更是一举夺魁,彰显了云原生数据库的蓬勃发展态势,Oc ...

  4. 03 什么是预训练（Transformer 前奏）

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  5. 【技术分析】恶意 SPL 代币识别指南

    背景 在 EVM 生态上,存在各式各样的 ERC20 代币,因其实现方式有着极高的自由度,也催生了花样繁多的恶意代币.这些恶意代币通常会在代码中实现一些恶意的逻辑(禁止用户卖出,特权铸造或销毁等),其 ...

  6. GDOI绝望记——人生第一次省选普及

    时光匆匆,如白驹过隙. 转眼之间,我一在OI之路上走了2年半了.. 岁月不饶人,我却在不经意间饶了岁月. 自己到底是不是不如别人,这,是取决于自己的心态吧 Preface 人生中第一次去深圳(应该是吧 ...

  7. WPF中为Popup和ToolTip使用WindowMaterial特效 win10/win11

    先看效果图: 大致思路是:通过反射获取Popup内部的原生窗口句柄,然后通过前文已经实现的WindowMaterial类来应用窗口特效:对于ToolTip,为了保持其易用性,我使用了附加属性+全局样式 ...

  8. PHP将整形数字转为Excel下标

    1.背景 这两天在接到一个需求,需要导出一个班级所有学员的所有成绩,在最后excel表处理的时候发现导出的列超过了26列,后面会出现AA之类的下标,所以写了一个函数把数字整型转为Excel对应的下标. ...

  9. RocketMQ 5.0 多语言客户端的设计与实现

    本文作者:古崟佑,阿里云中间件开发. RocketMQ 5.0 版本拥有非常多新特性,比如存储计算分离. batch 能力的提升等,它是具有里程碑意义的版本. 提到新版本,我们往往会首先想到服务端架构 ...

  10. 什么是 Nodejs

    这集来聊什么是 Nodejs ,看看 Node.js 是为了解决什么样的痛点而生的,为啥说它是一个 JS 的运行环境,以及 npm 是什么,为何能引发了 Web 开发的革命. Node.js 的诞生 ...