Javascript表格的隔行换色效果

最新推荐文章于 2023-11-19 11:09:06 发布
最新推荐文章于 2023-11-19 11:09:06 发布
阅读量286 收藏 2
点赞数 1
分类专栏： Javascript 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46513544/article/details/104749355
版权 
                         案例分析

1、用到鼠标事件 鼠标经过onmouseover 离开onmouseout
2、核心思路：鼠标经过行，当前行变换颜色 离去去掉当前背景颜色
3、注意：第一行不需要变色 获取的是body 行

HTML代码部分 首先 table 标签定义格式

标签定义格式 书写

css样式
css样式的使用，值得一提的是 类标签的使用 为鼠标经过中的做铺垫 调用经过时tr可用到的颜色
JS
第一行 ：获取元素，获取的是tbody里面的行
第二行：利用循环绑定事件
第三行：鼠标经过事件 css中的类可用className来改变 将bg所赋予的颜色调用到tbody里面的行 this指调用者trs[i]
第七行：鼠标离开事件
在这里插入图片描述

jasmine s
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用javascript实现li 列表数据隔行变换背景颜色
10-30
客户端效果，效率自然不错。以前的做法是偶数行时给li加一个class,方法当然不可取，如果后台读取再加class就很麻烦了，看看这个效果
基于JavaScript实现表格隔行换色
10-15
为了解决这个问题，我们可以使用JavaScript来实现表格隔行换色的功能，从而提升用户的浏览体验。本文将详细介绍如何基于JavaScript实现这一功能。 首先，我们需要理解JavaScript中与表格相关的DOM对象和属性。在...
JavaScript页面隔行换色效果
weixin_47982238的博客
08-05 329
<style> .hcls{ background: #999; } </style> </head> <body> </body> <script> for(i=0;i<10;i++){ if(i%2==0){ document.write('<h2 class="hcls">'+i+'</...
js隔行变色效果
liyanhecsdn的博客
01-10 468
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .even{ background: #eee; } .odd{ background: #fff; } &lt;/styl
JS效果：表格隔行换色
Abenazhan的博客
05-14 179
&lt;script&gt;function table(row,col,width,yanse1,yanse2){document.write('&lt;table border="1" width="+width+" align="center"&gt;');for(var i=0;i&lt;row;i++){    if(i%2==0)        var yanse=yanse1;   ...
使用JS(javascript)完成表格的一个隔行换色
qq_41485882的博客
09-08 650
使用JS(javascript)完成表格的一个隔行换色 分析 1.确定事件(页面加载事件onload) 2.获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。 3.Tbody里面的行数(rows.length) 4.JS的遍历(for循环) 5.获取奇数行和偶数行(对遍历中角标对2取余) 6.设置背景颜色(.s...
实现表格隔行换色效果特效代码
03-20
本教程将详细介绍如何实现表格隔行换色的代码实现。 首先，我们需要了解HTML表格的基本结构。在HTML中，`<table>`标签用于创建一个表格，`<tr>`表示表格行，`<td>`表示单元格。例如： ```html 数据1 数据2 ...
原生javascript实现隔行换色
10-24
在网页设计中，为了提高数据表格的可读性，经常采用隔行换色的方法，使得用户更容易区分每一行的信息。本篇文章将详细讲解如何使用原生JavaScript实现这一功能，无需依赖任何外部库如jQuery。 首先，我们需要理解...
表格 隔行换色升级版
09-05
本文将介绍一种使用JavaScript实现的表格隔行换色升级版，它能灵活地应用于页面上的多个表格。 首先，我们来看核心的JavaScript函数`showtable(tableid)`。这个函数接受一个参数`tableid`，即需要进行隔行换色的...
js隔行换色
u014414110的博客
02-28 212
效果： &lt;body&gt; &lt;input type="button" id="btn" value="点击变色"/&gt; &lt;ul id="gh"&gt; &lt;li&gt;红旗&lt;/li&gt; &lt;li&gt;五菱宏光&lt;/li&gt; &lt;l
js实现表格隔行换色
SqlloveSyn的博客
12-27 988
js实现表格隔行换色
js之表格隔行换色
chen_xingyao的博客
02-15 528
步骤分析： 第一步：确定事件(onload)并为其绑定一个函数 第二步：书写函数(获取表格) 第三步：获取tbody里面的行数 第四步：对tbody里面的行进行遍历 第五步：获取奇数行和偶数行(角标对2取余) 第六步：分别对奇数行和偶数行设置背景颜色 js代码： &lt;script type="text/javascript"&gt; //1.获取表格 ...
分别使用 CSS、JavaScript 和 JQuery 实现表格的隔行变色效果
疯魔coding君的博客
01-20 800
有时候为了使表格显示得更为显眼，区分不同的行，更易于查看，可以采用隔行变色来达到这样的效果，原表格效果如下所示： 我们所要实现的效果如下：
js实现隔行换色
最新发布
xiaohua0708day的博客
11-19 602
2.获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。6.设置背景颜色(.style.backgroundColor)第一步：确定事件(onload)并为其绑定一个函数。5.获取奇数行和偶数行(对遍历中角标对2取余)第五步：获取奇数行和偶数行(角标对2取余)1.确定事件(页面加载事件onload)第六步：分别对奇数行和偶数行设置背景颜色。第四步：对tbody里面的行进行遍历。4.JS的遍历(for循环)第二步：书写函数(获取表格)
利用javascript是表单隔行换颜色
7F
02-27 473
首先，我们需要一个表单，下面是我用的表单
Javascript知识【案例：表格隔行换色】
若有所执，必有所成，心之所向，必显光芒
08-07 2680
案例：表格隔行换色
JavaScript学习——表格的隔行换色+高亮显示
anjiukonghe77852的博客
08-20 247
1、案例一：我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下： 1）新标签 1 <thead> //表头 2 <tr> 3 <th></th> 4 　　　　</tr> 5 </thead>...
JavaScript 实现表格隔行变色
weixin_30326745的博客
05-03 157
JavaScript 实现表格隔行变色 　　版权声明：未经授权，严禁分享！　　 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaaaa; /*合并边框线*/ border-collapse: collapse; } ...
使用JavaScript实现表格隔行换色
05-03 187
完整代码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>JS实现表单隔行换色</title> 7 8 <sc...
javascript 表哥隔行换色
03-09
好的，我可以回答这个问题...在 HTML 中，可以使用 JavaScript 来实现表格隔行换色的效果。具体实现方法是通过 JavaScript 获取表格中的所有行，然后使用循环语句来判断行的奇偶性，再通过修改行的样式来实现隔行换色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值