用JS实现表格的高亮显示

最新推荐文章于 2023-03-13 10:17:40 发布

原创最新推荐文章于 2023-03-13 10:17:40 发布 · 762 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JS

html 同时被 2 个专栏收录

14 篇文章

订阅专栏

javaScript

9 篇文章

订阅专栏

1、所用事件详解

2、<thead>,<tbody>标签介绍

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

3、代码实现

<!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="white";
				}
			}
		</script>

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