方法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系统之System Server大纲

    前言 System Server是android 基本服务的提供者,是android系统运行的最基本需求,所有server运行在一个叫system_process的进程中,system_process ...

  2. vue前端使用nexus配置npm私有仓库

    当我们运行前端项目的时候,常常在解决依赖的时候会加上一个参数npm install --registry=https://registry.npm.taobao.org将源指定为淘宝的源,以期让速度加 ...

  3. MYSQL存储过程-练习4 loop循环

    MYSQL存储过程-练习4 loop循环 创建存储过程 1 DELIMITER $$ 2 3 CREATE PROCEDURE `sp_loop`() 4 BEGIN 5 DECLARE i INT; ...

  4. 解密prompt系列40. LLM推理scaling Law

    OpenAI的O-1出现前,其实就有已经有大佬开始分析后面OpenAI的技术路线,其中一个方向就是从Pretrain-scaling,Post-Train-scaling向Inference Scal ...

  5. spring boot 官网提供所有组件

    所有资源来自于官网:https://start.spring.io/,在此整理只是为了方便查看 Developer Tools Spring Boot DevToolsProvides fast ap ...

  6. docker打包镜像，上传镜像仓库，使用rancher发布

    步骤一.首先将项目打包放在指定目录下 项目jar包名称为  micro-app.jar 步骤二.将jar包名称改为指定名称,执行命令    docker build -t micro-gateway: ...

  7. 在 Ubuntu 22.04 上安装 KubeSphere 实战教程

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

  8. 【原创】dell戴尔笔记本充电头4530改装typeC口过程记录笔记本电源改装c口三路接线定义指南（图解）

    在淘宝淘一个备用笔记本电脑,要求便携能用,最重要便宜(如果不便宜买了就想高价卖了) 选择了xps13 L322x,键盘屏幕有瑕疵,打折下来价格170左右,换了个键盘20.整体重量1.3kg左右,大小A ...

  9. Selenium实现元素定位

    Selenium提供了定位元素的方法find_element(),该方法被定义在WebDriver类中. 一.参数 1.两个参数,参数1根据不同定位方法确定,定位方法如下: (1)通过id定位:使用参 ...

  10. 【CoCollider】让系统和应用适配如此简单

    在各平台应用开发过程中,随着业务的功能增加,不免会涉及到非公开的API依赖,针对某些应用或厂商系统的适配,每个版本都需要投入精力去排查,CoCollider 可以让我们的适配效率从几个星期提升到几小时 ...