使用javascript实现表格高亮(onmouseover()鼠标被移动元素上事件onmouseout()鼠标从某元素移开事件)

最新推荐文章于 2022-09-28 17:52:00 发布
最新推荐文章于 2022-09-28 17:52:00 发布
阅读量716 收藏 1
点赞数 1
分类专栏： Callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40332952/article/details/104349849
版权
使用javascript实现表格高亮(onmouseover()鼠标被移动元素上事件onmouseout()鼠标从某元素移开事件)
技术分析
  1. 确定事件(onmouseover()鼠标被移动元素上事件onmouseout()鼠标从某元素移开事件)
代码步骤
  1. 首先确定事件onmouseover()鼠标移动到元素上触发事件,onmouseout()鼠标从某元素移开触发事件
  2. 书写这两个函数,设置元素属性即可。

代码事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用javascript实现高亮</title>
		<script type="text/javascript">
			function movemousever(val){
				document.getElementById("tr"+val).style.backgroundColor="red";
			}
			function movemouseout(val){
				document.getElementById("tr"+val).style.backgroundColor="white";
			}
		</script>
	</head>
	<body>
		<table border="1px" width="500px" height="300px" align="center">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr id="tr1" onmouseover="movemousever(1)" onmouseout="movemouseout(1)">
					<td>1</td>
					<td>小明</td>
					<td>20</td>
				</tr>
				<tr id="tr2" onmouseover="movemousever(2)" onmouseout="movemouseout(2)">
					<td>2</td>
					<td>小李</td>
					<td>21</td>
				</tr>
				<tr id="tr3" onmouseover="movemousever(3)" onmouseout="movemouseout(3)">
					<td>3</td>
					<td>小孙</td>
					<td>33</td>
				</tr>
				<tr id="tr4" onmouseover="movemousever(4)" onmouseout="movemouseout(4)">
					<td>4</td>
					<td>小凤</td>
					<td>23</td>
				</tr>
				<tr id="tr5" onmouseover="movemousever(5)" onmouseout="movemouseout(5)">
					<td>5</td>
					<td>小肖</td>
					<td>26</td>
				</tr>
				<tr id="tr6" onmouseover="movemousever(6)" onmouseout="movemouseout(6)">
					<td>6</td>
					<td>小绿</td>
					<td>27</td>
				</tr>
				
			</tbody>
		</table>
	</body>
</html>

页面效果展示
当鼠标移动到表格上背景就会变红，移开就会消失。

ginger_mr
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现鼠标移动高亮显示表格行
weixin_44810919的博客
02-09 1050
实现功能：鼠标移动到某一行后该行变色（粉色）显示，移出后恢复原来颜色。 用到的事件： 1.onmouseover事件 属性在鼠标指针移动到元素上时触发 2. onmouseout事件 鼠标指针移出指定的对象时触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
纯JS代码实现隔行变色鼠标移入高亮
12-29
在前端开发中经常见到隔行变色鼠标移入高亮显示的效果，下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果，废话不多说了，具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <style type=text/css> #table { width: 400px; border-collapse: collapse; } </style> </head> <body> <table id=table border=1> <thead> <td>ID</td> <td>姓
js设置表格行的单击、鼠标移动事件，光棒效果
快乐每一天
09-28 417
[code="js"]var setTable = function(table_id) { var table = document.getElementById(table_id); var rows = table.getElementsByTagName("tr"); for (i = 1; i < rows.length; i++) {// 0 is start var...
Table的onMouseOver和onMouseOut鼠标事件的问题
yaoyanzhu的博客
10-14 1251
看下面这段代码： 我们需要给某个TABLE加上鼠标事件的时候，一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理．　一般情况下你会用onmouseover和onmouseout，代码如下： [code="html"] 菜单1 菜单2 ...
大多数人不知道的表格其他写法的onmouseover效果
aihuobing7181的博客
12-16 179
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <m...
鼠标移入移出事件改变图片的分辨率的两种方法
09-04
然后，使用JavaScript监听`onmouseover`和`onmouseout`事件，当鼠标移入图片时，将当前元素的类名更改为高亮类，反之则恢复默认类。以下是一个示例： ```html #imgList li img { opacity: 0.3; filter: alpha...
JavaScript 事件记录使用说明
10-29
14. `onmouseout`：鼠标从元素上移开时触发。 15. `onmouseover`：鼠标移动到元素上时触发。 16. `onmouseup`：鼠标按钮被释放时触发。 17. `onreset`：复位按钮被点击时触发。 18. `onresize`：窗口或框架尺寸改变...
Javascript鼠标事件大全
08-25
综上所述，JavaScript提供了丰富的鼠标事件供开发者使用，不同的事件适用于不同的应用场景。通过合理利用这些事件，可以显著提升用户体验和应用程序的功能性。开发者可以根据具体需求选择合适的事件，并结合实际业务...
javascript 多浏览器 事件大全
12-07
5. `onMouseOver`：在IE3、Netscape 2、Opera 3及以上版本中支持，当鼠标进入某一对象区域时触发，常用于高亮显示或显示提示信息。 6. `onMouseMove`：在IE4、Netscape 4及更高版本中支持，当鼠标在页面上移动时...
总结javascript鼠标事件笔记
12-30
6. onmousemove：鼠标在元素内移动时触发，常用于绘制图形或实现鼠标跟随效果。 7. onmouseout：鼠标指针离开元素范围时触发，常与onmouseover配合，取消或恢复之前的动作。 8. onkeypress：当用户按下并释放一个...
html表格鼠标高亮行列,JS+CSS实现表格高亮的方法
weixin_35482237的博客
06-09 693
本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下：这里使用JavaScript+CSS实现表格高亮的功能，实际上类似于隔行换色的效果，说法不同而已，只不过本效果是在鼠标移上时触发，移出结束。运行效果如下图所示：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">高亮的表格co...
onmouseover事件
qq_73686203的博客
09-28 1074
onmouseover：鼠标从元素上移出。
js实现表格的动态操作
aqzengkuasheng的博客
02-16 271
1.当光标移动到表格的某一个单元格的时候，表格会变色 2.一次选中删除表格，或者一个一个删除表格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 60%; /* border: 1px solid red; */ height: 300px; margin
Js-鼠标移动，列表高亮显示
可可Yi奇的博客
09-28 1200
Js实现简单的鼠标移动，列表高亮显示 代码笔记 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表高亮显示</title> </head> <bo
用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮
汉尼拔的手术室
04-14 1816
用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮 效果如下： 错误代码（只在srcipt中出现错误）： window.onload=function(){ var oTab=document.getElementById('tab1'); for(var i=0;i<oTab.tBodies[0].
JS实现表单隔行换色，鼠标移入高亮
御晨风而归
04-11 1748
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div...
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
qq_44162778的博客
08-08 2337
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
js实现高亮显示鼠标所在行
qq_39056805的博客
05-21 1614
行：&lt;tr id="data_${stat.index}" class="main_trbg" align="center"&gt; Js:/** 给数据行绑定鼠标覆盖以及鼠标移开事件 */ $("tr[id^='data_']").hover(function(){     $(this).css("backgroundColor","#eeccff"); },f
js table鼠标移动高亮显示
KingCruel的专栏
08-28 4384
//鼠标移动高亮显示     function cells_color() {         var oColor, td = event.srcElement         if (td.tagName != "TD")             return;         if (event.type == "mouseover")             oColor =
html中模拟光标悬停事件,HTML 事件 -- 鼠标移入高亮显示
最新发布
05-12
这里我们在`<div>`元素中添加了`content`样式类，同时也添加了`onmouseover`和`onmouseout`事件，当鼠标移入元素时，会自动添加`highlight`样式类，从而实现高亮显示效果；当鼠标移出元素时，会自动移除`highlight`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值