js表格中的DOM操作之隔行变色，鼠标进入当前行高亮

最新推荐文章于 2020-05-20 11:04:40 发布
最新推荐文章于 2020-05-20 11:04:40 发布
阅读量551 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanjiejiaoxiangni/article/details/83050006
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		</style>
		<script>
			/**
				功能实现：1、实现表格隔行变色功能
						  2、实现鼠标移入表格当前行高亮展示
				步骤：1、根据表格id获取当前表格
					  2、获取表格中的tBody(Bodies[0])
					  3、循环tBody中的行数，偶数行设置背景色为灰色
			*/
			window.onload = function(){
				//获取ID为tab1的表格
				var oTab = document.getElementById('tab1');
				
				//*为防止行事件变色后将原来的背景色覆盖掉，定义变量记录原背景色
				var preBackground=null;
				
				//alert(oTab.tBodies[0].rows.length);
				//循环遍历表格每一行
				for(var i=0;i<oTab.tBodies[0].rows.length;i++){
					//判断当前行是否为偶数行
					if(i%2==0){
						//设置当前行的背景色
						oTab.tBodies[0].rows[i+1].style.background='gray';
					}
					//为每一行增加鼠标移入事件
					oTab.tBodies[0].rows[i].onmouseover = function(){
						preBackground = this.style.background;
						this.style.background='yellow';
					}
					//为每一行增加鼠标移出事件
					oTab.tBodies[0].rows[i].onmouseout = function(){
						this.style.background=preBackground;
					}
				}
				
			}
			
			
		</script>
	</head>
	<body>
		<table border="1px" width="300px" id="tab1">
			<tHead>
				<tr>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</tHead>
			<tBody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>27</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>3</td>
				</tr>
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>50</td>
				</tr>
					<tr>
					<td>5</td>
					<td>王小七</td>
					<td>30</td>
				</tr>
				<tr>
					<td>6</td>
					<td>刘小二</td>
					<td>36</td>
				</tr>
			</tBody>
		</table>
		
	</body>
</html>
zhanjiejiaoxiangni
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
分别使用js和JQuery实现简单的表格隔行变色以及高亮显示
bigLiu66的博客
09-18 1080
一、1.1隔行变色html 表格 使用&lt;thead&gt;和&lt;tbody&gt;标签拆分表头和内容 &lt;table border="1" width="500" height="50" align="center" id="tb1"&gt; &lt;thead&gt; &lt;tr&gt;
js实现表格隔行变色和鼠标移入高亮
Q_004的博客
08-20 3172
代码如下： window.onload=function() { var oTab=document.getElementById('tab1') var oldColor=''; function toColor() { for(var i=0;i<oTab.tBodies[0].
JavaScript之DOM操作实现一个鼠标滑动颜色变化实例
gxgalaxy
05-16 638
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> <style> *{...
jQuery实现table隔行换色和鼠标经过变色
itmyhome的专栏
06-14 8426
jQuery实现table隔行换色和鼠标经过变色 一、隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定： $("table tr:nth-child(odd)").css("background-color","#eeeeee"); 二、鼠标经过变色 $("tr").live({ mouseover:function(){ $(this).
Table表格的隔行变色，高亮选择当前行效果
weixin_30439067的博客
03-06 308
最近客户要求高亮选择列表的功能，于是顺便做了个，作为记录。 前台代码： View Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
10-20
主要介绍了jQuery实现Table表格隔行变色及高亮显示当前选择行效果,涉及jQuery针对table元素遍历、运算、样式及鼠标事件动态响应相关操作技巧,需要的朋友可以参考下
jquery实现控制表格行高亮实例
01-19
[css] 代码如下:<style> .height{ background:#666666; /*背景颜色为灰色*/ } tr{ cursor: pointer; /*手形*/ } </style> <style>.height{ background:#666666; /*背景颜色为灰色*/}tr{ ...
Excel表格的隔行调整行高的4种方法.docx
09-26
Excel表格的隔行调整行高的4种方法.docx
隔行换色并且鼠标指向行变色的表格
实践求真知
04-12 1941
一 应用 对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。   二 代码 table{ border:0;border-collapse:collapse;} /*设置表格整体样式*/ td{font:normal 12px/17px Arial;padding:2
js代码实现表格隔行变色，添加新的元素，以及鼠标停留变色
dfc_xiaoke的博客
09-18 534
js代码实现表格隔行变色，添加新的元素，以及鼠标停留变色 隔行变色 ![运行效果](https://img-blog.csdn.net/20180918170445981?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RmY194aWFva2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFC...
表格隔行变色以及鼠标移上变色 js代码
qq_40216244的博客
09-04 505
var oldColor=''; //var oTab=document.getElementById('tab1') function toColor(tableID) { var oTab=document.getElementById(tableID) for(var i=0;i&lt;oTab.tBodies[0].rows.leng...
JavaScript--DOM操作例子：隔行变色
weixin_30628077的博客
10-19 82
上效果： 实现思想： 主要是js动态创建标签，还有动态结合css实现样式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 &...
jsp表格中实现鼠标放到某一行，使这行背景变色，移开时背景色还原。
无道的博客
04-21 7198
思路：1、了解js获取表中tr。     2、了解鼠标移上、移出方法。             3、了解js中替换css中样式。 //获取tr         var rows = document.getElementsByTagName('tr'); //鼠标放在、或移出表格中某一行的效果。 for（int i=0;i if() }
html中用js实现的表格隔行换色
周先森爱编程丶的博客
09-16 7206
写的时候把自己的表//写的时候把自己的表的table加上id="tbl" <table id="tbl">代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> window.onload = fun
表格隔行变色效果_js鼠标移入移出
weixin_46323591的博客
05-20 251
表格隔行变色效果_js鼠标移入移出 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table {
实现数据展示表格的隔行变色，并且对含有文本“王五”的数据行高亮显示
最新发布
06-01
您可以使用CSS来实现表格的隔行变色和行高亮显示。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>表格样式</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even) { background-color: #f2f2f2; } tr.highlight { background-color: yellow; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> <tr> <td>王五</td> <td>28</td> <td>男</td> </tr> <tr> <td>赵六</td> <td>35</td> <td>女</td> </tr> <tr class="highlight"> <td>王五</td> <td>28</td> <td>男</td> </tr> <tr> <td>孙七</td> <td>20</td> <td>女</td> </tr> </tbody> </table> </body> </html> ``` 在上面的代码中，我们使用了 `tr:nth-child(even)` CSS选择器来为表格的偶数行设置背景颜色，使用了 `.highlight` CSS类来高亮显示包含“王五”的行。您可以根据需要修改选择器和类名来实现您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值