利用JavaScript制作简单的表格单行变色

最新推荐文章于 2023-12-14 09:06:38 发布

Z这是啥呀

最新推荐文章于 2023-12-14 09:06:38 发布

阅读量564

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_53024100/article/details/115774484

版权

在网上经常会看到这样长长的表格，当表格过于复杂时难免看花眼，不知道自己看的是哪一行。
在这里插入图片描述
而今天咱们就做一个简单的表格单行变色
本人也是一个正在学习的萌新，希望一起共同进步

首先要了解两个简单的事件属性

鼠标经过事件 onmouseover
鼠标离开事件 onmouseout
相当与css里面的:hover 选择器

其次建立一个表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			table {
				width: 1000px;
				height: 400px;
				margin: 200px auto;
				text-align: center;
				border-collapse: collapse;
				font-size: 14px;
			}
			thead tr{
				height: 30px;
				background-color: skyblue;
			}
			tbody tr {
				height: 30px;
			}

			tbody td {
				border-bottom: #A9A9A9 1px solid;
				font-size: 12px;
				color: blue;
			}
			tbody td:nth-child(n+3)
			{
				color:red;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td>编号</td>
					<td>名称</td>
					<td>最新公布值</td>
					<td>累计值</td>
					<td>前单位值</td>
					<td> 净增长率</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>00356</td>
					<td>农业银行3个月定期开放债券</td>
					<td>1.026</td>
					<td>1.089</td>
					<td>1.058</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>00356</td>
					<td>农业银行3个月定期开放债券</td>
					<td>1.026</td>
					<td>1.089</td>
					<td>1.058</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>00356</td>
					<td>农业银行3个月定期开放债券</td>
					<td>1.026</td>
					<td>1.089</td>
					<td>1.058</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>00356</td>
					<td>农业银行3个月定期开放债券</td>
					<td>1.026</td>
					<td>1.089</td>
					<td>1.058</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>00356</td>
					<td>农业银行3个月定期开放债券</td>
					<td>1.026</td>
					<td>1.089</td>
					<td>1.058</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>00356</td>
					<td>农业银行3个月定期开放债券</td>
					<td>1.026</td>
					<td>1.089</td>
					<td>1.058</td>
					<td>+0.047%</td>
				</tr>
			</tbody>
		</table>

	</body>

这里为了方便数据什么的都没有过多的改动

下面就是效果图 这里插入图片描述

然后就是关键的JS代码

这里先我们获取元素

var trs=document.querySelector("tbody").querySelectorAll("tr");

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

然后就是注册事件

//trs 获取的是tr标签元素的集合 我们可以把它看成一个伪数组
//然后利用for循环给他们每个tr注册鼠标经过事件
for(var i=0;i<trs.length;i++)
			{
				trs[i].onmouseover=function()
				{
					this.style.backgroundColor='pink';
				}
			}
			//为了让经过后离开又恢复原来的样子，我们需要在用for循环给它们全部注册鼠标离开事件 将它们的背景色改为 无
			for(var i=0;i<trs.length;i++)
			{
				trs[i].onmouseout=function()
				{
					this.style.backgroundColor='';
				}
			}

Z这是啥呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript制作简单的表格单行变色

在网上经常会看到这样长长的表格，当表格过于复杂时难免看花眼，不知道自己看的是哪一行。而今天咱们就做一个简单的表格单行变色本人也是一个正在学习的萌新，希望一起共同进步首先要了解两个简单的事件属性鼠标经过事件 onmouseover鼠标离开事件 onmouseout相当与css里面的:hover 选择器其次建立一个表单<!DOCTYPE html><html> <head> <meta charset="utf-8"> <tit
复制链接

扫一扫