方法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. windows 下搭php环境

    windows 下搭php环境(php7.2+mysql5.7+apache2.4) 1. 先下载需要的软件 1) 先去微软官网下载vc,我下载的是2017版中文简体的.网址为https://www. ...

  2. Android性能优化：getResources()与Binder交火导致的界面卡顿优化

    背景 某轮测试发现,我们的设备运行一个第三方的App时,卡顿感非常明显: 界面加载很慢,菊花转半天 滑屏极度不跟手,目测观感帧率低于15 对比机(竞品)也会稍微一点卡,但是好很多,基本不会有很大感觉的 ...

  3. nestjs 中管道的使用-验证DTO

    1. 安装管道 nest g pi role 意思是安装一个role模块的管道 2. 在controller中使用管道 管道的作用: 1. 数据的转换 2. DTO规则验证 一般使用全局配置管道 区别 ...

  4. 小程序把html代码渲染到页面上 rich-text

    <rich-text nodes="<h1>html的代码显示再小程序使用rich-text组件</h1>"></rich-text> ...

  5. [MySQL] MySQL数据库中唯一标识符(ID)的梳理总结

    0 引言 mysql 数据库中有各类id,在近期初步研究 flink cdc .debezium.mysql server id.server uuid.gtid.sesion id/connecti ...

  6. 关于git的安装

    window平台下面: 步骤一: 首先去官网下载安装包: 官方链接:https://git-scm.com/download/win 至于选择32位还是64为的,各位就见仁见智了(根据自己的系统). ...

  7. Python-提高-1

    阅读目录 1.GIL(全局解释器锁) 2.深拷贝.浅拷贝 3.私有化 4.import导入模块 5.再议 封装.继承.多态 一.GIL(全局解释器锁) GIL面试题如下 描述Python GIL的概念 ...

  8. html 根据配置项统一检查文本框数据规范

    <div> 中文名:<input id="txtName" type="text" /><br /> 身份证号:<in ...

  9. mysql 备份还原命令备忘

    1.备份 mysqldump -u username -p databasename tableName > backupfile.sql 2.还原 mysql -u username -p p ...

  10. WebElement的常用属性和方法

    WebElement是WebDriver.find_element()方法返回的一个对象,该对象用来描述Web上的一个元素,比如输入框,按钮等.本节介绍WebElement的常用属性和方法. 一.We ...