方法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. 34.vue响应式

    响应式就是 数据发生变化,ui界面自动更新内容 : vue响应式的实现是在 创建vue实例的时候,遍历data数据,通过 Object.defineProperty给每个数据添加 getter 和 s ...

  2. 开源之夏 2022 重磅来袭！欢迎报名 KubeSphere 社区项目！

    活动简介 "开源之夏(英文简称 OSPP)"是中科院软件所"开源软件供应链点亮计划"指导下的系列暑期活动,由软件所与 openEuler 社区共同主办. 开源之 ...

  3. Kubernetes 集群中 Ingress 故障的根因诊断

    作者:scwang18,主要负责技术架构,在容器云方向颇有研究. 前言 KubeSphere 是青云开源的基于 Kubernetes 的云原生分布式操作系统,提供了比较炫酷的 Kubernetes 集 ...

  4. 自建家庭 KTV，在家想嗨就嗨

    现在用户最多.曲库最多的 K 歌软件是全民K歌,基本上想唱的歌都有,而且基本上每首歌都有 MV 或视频,使用体验也还不错,但是收费太贵了,对于一个月唱不了几次的打工人来说,唱一首歌就是"天价 ...

  5. nginx实现资源文件动静分离的记录

    Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用 Nginx 处理静态页面,Tomcat ...

  6. Octomap的学习

    什么是octomap? RGBD SLAM的目的有两个:估计机器人的轨迹,并建立正确的地图.地图有很多种表达方式,比如特征点地图.网格地图.拓扑地图等等.在<一起做>系列中,我们使用的地图 ...

  7. git安装-Tortoise git 安装汉化教程

    1.首先下载 去官网下载 如果下载比较慢的,链接自取 https://pan.quark.cn/s/fcb9d0b39c7f 2. 安装git 3. 安装git图形化工具Tortoise git 4. ...

  8. selenium3环境搭建，Firefox与对应的geckodriver, chrome与对应的Chromedriver

    Firefox与对应的geckodriver 火狐下载:http://ftp.mozilla.org/pub/firefox/releases/ geckodriver下载:https://githu ...

  9. NOIP2024模拟赛13：拆开未来

    NOIP2024模拟赛13:拆开未来 写在前面:进制哈希的P不要用998244353会被卡!用131.注意取模为负数的情况! C-重复 一句话题意:给定字符串 \(S\), 问 \(S\) 的所有子串 ...

  10. 局部加权回归（Lowess）

    代码示例:(源自:https://blog.csdn.net/weixin_71158509/article/details/136060826) import numpy as np import ...