表格高亮显示

最新推荐文章于 2022-04-22 11:15:56 发布

x_l_x

最新推荐文章于 2022-04-22 11:15:56 发布

阅读量133

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_42740745/article/details/84500741

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格高亮显示</title>
<script>
	function changeColor(id,flag){
		if(flag=='over'){
			document.getElementById(id).style.backgroundColor="red";
		}else if(flag=='out'){
			document.getElementById(id).style.backgroundColor="";
		}
	};
</script>

</head>
<body>
	<table border="1" width="500" height="50" align="center" id="tbl">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr id="tr1" onmouseover="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')">
				<td>1</td>
				<td>张三</td>
				<td>22</td>
			</tr>
			<tr id="tr2" onmouseover="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')">
				<td>2</td>
				<td>李四</td>
				<td>25</td>
			</tr>
			<tr id="tr3" onmouseover="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')">
				<td>3</td>
				<td>王五</td>
				<td>27</td>
			</tr>
			<tr id="tr4" onmouseover="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')">
				<td>4</td>
				<td>赵六</td>
				<td>29</td>
			</tr>
			<tr id="tr5" onmouseover="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')">
				<td>5</td>
				<td>田七</td>
				<td>30</td>
			</tr>
			<tr id="tr6" onmouseover="changeColor('tr6','over')" onmouseout="changeColor('tr6','out')">
				<td>6</td>
				<td>汾九</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>
</body>
</html>