如何JavaScript完成表格高亮显示扩展，详细步骤如下：

最新推荐文章于 2019-11-23 20:03:44 发布

乔洪涛

最新推荐文章于 2019-11-23 20:03:44 发布

阅读量208

点赞数

分类专栏：前端内容区文章标签：表格高亮显示前端

本文链接：https://blog.csdn.net/qq_43299421/article/details/84796147

版权

前端内容区专栏收录该内容

5 篇文章 0 订阅

订阅专栏

大家好，我是今天的博主，<一个想做全栈的咸鱼>
话不多说直接进入主题
首先呢？让我们来进行分析：
第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步：获取鼠标移上去的那行，对其设置背景颜色
代码：
JS代码：

<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>

HTML代码

<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

自己做的例子共大家参考：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格高亮显示</title>
		<script>
			function changColor(id,flag){
				if(flag=="over"){
					//鼠标点击到该位置时，显示该颜色
					document.getElementById(id).style.backgroundColor="darkslategrey";
				}else if(flag=="out"){
					//离开结束时是当前颜色
					document.getElementById(id).style.backgroundColor="darkgoldenrod";
				}
			}
		</script>>
	</head>
	<body>
		<!--分析
		1.确定事件（onmouseover和onmouseout）分别为其绑定一个函数
		2.获取鼠标移上去的行，对其设置背景颜色-->
		<table border="1" width="500" height="300" align="center" cellpadding="0" cellspacing="0" id="tbl">
		<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		</thead>
		<tbody>
		<tr align="center" onmouseover="changColor('p1','over')" id="p1" onmouseout="changColor('p1','out')">
			<td>1</td>
			<td>张三</td>
			<td>14</td>
		</tr>
		<tr align="center" onmouseover="changColor('p2','over')" id="p2" onmouseout="changColor('p2','out')">
			<td>2</td>
			<td>李四</td>
			<td>15</td>
		</tr>
		<tr align="center" onmouseover="changColor('p3','over')" id="p3" onmouseout="changColor('p3','out')">
			<td>3</td>
			<td>王五</td>
			<td>16</td>
		</tr>
		<tr align="center" onmouseover="changColor('p4','over')" id="p4" onmouseout="changColor('p4','out')">
			<td>4</td>
			<td>王五</td>
			<td>16</td>
		</tr>
		<tr align="center" onmouseover="changColor('p5','over')" id="p5" onmouseout="changColor('p5','out')">
			<td>5</td>
			<td>王五</td>
			<td>16</td>
		</tr>
		<tr align="center" onmouseover="changColor('p6','over')" id="p6" onmouseout="changColor('p6','out')">
			<td>6</td>
			<td>王五</td>
			<td>16</td>
		</tr>
		<tr align="center" onmouseover="changColor('p7','over')" id="p7" onmouseout="changColor('p7','out')">
			<td>7</td>
			<td>王五</td>
			<td>16</td>
		</tr>
		</tbody>
	</body>
</html>

最后在啰嗦总结一下，回顾之前已经使用过的事件(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
在这里插入图片描述
onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)。
在这里插入图片描述
希望可以帮助到大家，我们下次再见，我还是那个咸鱼!