表格隔行变色效果_js鼠标移入移出

最新推荐文章于 2023-08-26 11:05:53 发布

尹太初

最新推荐文章于 2023-08-26 11:05:53 发布

阅读量284

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/weixin_46323591/article/details/106231160

版权

表格隔行变色效果_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 {
			width: 800px;
			margin: 100px auto;
			border-collapse: collapse;
			text-align: center;
		}

		thead tr {
			height: 30px;
			background-color: skyblue;

		}

		tbody tr {
			height: 30px;
		}

		tbody td {
			border-bottom: 1px solid #d7d7dd;
			font-size: 12px;
			color: blue;
		}

		.bg {
			background-color: pink;
		}
	</style>
</head>

<body>
	<table>
		<thead>
			<tr>
				<th>代码</th>
				<th>名称</th>
				<th>最新公布值</th>
				<th>累计净值</th>
				<th>前单位净值</th>
				<th>净值增长率</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>34234</td>
				<td>344234</td>
				<td>44343</td>
				<td>34334</td>
				<td>34545</td>
				<td>54355</td>
			</tr>
			<tr>
				<td>34234</td>
				<td>34234</td>
				<td>324423</td>
				<td>23424</td>
				<td>2444</td>
				<td>232344</td>
			</tr>
			<tr>
				<td>345534</td>
				<td>34234</td>
				<td>324423</td>
				<td>23424</td>
				<td>2444</td>
				<td>232344</td>
			</tr>
			<tr>
				<td>34234</td>
				<td>324423</td>
				<td>23424</td>
				<td>2444</td>
				<td>232344</td>
				<td>232344</td>
			</tr>
		</tbody>
	</table>
</body>
<script>
	var obj = document.querySelector('tbody').querySelectorAll('tr');
	for (var i = 0; i < obj.length; i++) {
   obj[i].onmouseover = function (){
		 this.className = 'bg';
	 }
	 obj[i].onmouseout = function(){
		 this.className = '';
	 }
	}
</script>

</html>