（28）表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色

最新推荐文章于 2023-08-30 10:16:23 发布
最新推荐文章于 2023-08-30 10:16:23 发布
阅读量3.4k 收藏 2
点赞数 3
分类专栏： JavaScript案例解析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuan6251237011/article/details/37942103
版权

基本思想：使用表格中某一行的onmouseover和onmouseout事件，当鼠标移进的时候保存当前行的背景颜色并且设置当前行的颜色为要高亮的颜色，当鼠标移出的时候设置为保存的行的颜色，即可保持在隔行变色中高亮显示鼠标所指行并且鼠标移出的时候能够显示原来的行的颜色。

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
	window.οnlοad=function ()
	{
		var oTab=document.getElementById('tab1');
		var oldColor='';//用于保存原来一行的颜色
		
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)//oTab.tBodies[0].rows.length表示tBodies中有几行
		{
			oTab.tBodies[0].rows[i].οnmοuseοver=function ()
			{
				oldColor=this.style.background;
				this.style.background="green";
			};
			oTab.tBodies[0].rows[i].οnmοuseοut=function ()
			{
				
				this.style.background=oldColor;//鼠标移出的时候将本行的颜色设置为原来的颜色，而原来的颜色保存在oldColor中

			};
			
			
			if(i%2)
			{
				oTab.tBodies[0].rows[i].style.background="#CCC"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
无人与我共黄昏
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
js实现表格隔行变色和鼠标移入高亮
Q_004的博客
08-20 3175
代码如下： window.onload=function() { var oTab=document.getElementById('tab1') var oldColor=''; function toColor() { for(var i=0;i<oTab.tBodies[0].
实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复的另一种方法
天空守护云
01-24 629
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width
鼠标停留变换颜色（以颜色为例）的2种方法
zyh2525246的博客
06-29 1万+
首先看效果图。 当鼠标在框外的时候，显示背景色均为白色。鼠标悬停在上方时，背景色变换。鼠标悬停在下方时，背景色变换。 如图所示，一种用的‘hover’效果，一种是用的'onmouseover'与'onmouseout'  table{ margin:0 auto; width:300px; height:150px; border:1px solid #000000;
el-table移入或选中某行时改变颜色
最新发布
skdjbd的博客
08-30 1041
el-table改变当前行背景色
elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）
qq_55031668的博客
02-01 1万+
elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）
jquery插件之表格隔行变色并鼠标滑过高亮显示
weixin_34290352的博客
08-20 168
该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。 此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
10-24
主要介绍了javascript表格隔行变色加鼠标移入移出及点击效果的方法,涉及javascript实现隔行变色及鼠标点击效果的相关技巧,非常具有实用价值,需要的朋友可以参考下
纯JS代码实现隔行变色鼠标移入高亮
10-21
主要介绍了纯JS代码实现隔行变色鼠标移入高亮的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx
01-18
javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx
当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变
03-16
NULL 博文链接：https://zhangyi6678.iteye.com/blog/430459
el-table鼠标移入变色、el-table排名样式变化
m0_60827885的博客
04-13 2446
背景颜色实现效果： ::v-deep .el-table .el-table__body tr td:hover{ background-color: #d4b021 !important; } 边框实现效果： ::v-deep .el-table .el-table__body tr td { border: 2px solid transparent !important; } ::v-deep .el-table .el-table__body tr td:hover {
ASP.NET2.0下为GridView添加鼠标滑过（onmouseover、onmouseout）的行颜色高亮效果！
zgqtxwd的专栏
04-24 207
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
Vue 修改el-table 背景颜色，鼠标移入时颜色变换
热门推荐
java
11-29 2万+
Vue 修改el-table 背景颜色，鼠标移入时颜色变换一、表格样式展示二、el-table背景颜色三、hover样式修改 该文章在搭建完Vue-cli环境同时实现el-table的展示。 如果想了解构建表格请访问我之前的文章：点击跳转 一、表格样式展示 表格代html码如下 <div class="tableMain"> <el-table :data="ta.........
VUE学习（七） 自定义列表鼠标移入变色，点击变色（仿el-table实现）
n009ww的博客
11-08 4644
常规列表数据用elementUI的el-table标签即可实现，但有些需要自定义列表数据样式的，则需要手写，这样如何做出和el-table一样的效果呢？一下代码可以实现 页面渲染 <div class="list" v-if="tableDate.length" v-infinite-scroll="load"> <div :cla...
（23）使用DOM插入新元素，每次插入的新节点放在最前面
虚心求学_一点一滴
07-18 8240
<!-- DOM创建元素，①创建li，②再插入相应的父级中去， -->  window.onload=function () { var oBtn=document.getElementById('btn1'); var oU1=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'
（4）鼠标移动某个区域时候显示内容，移出某个区域的时候隐藏某个内容
虚心求学_一点一滴
05-24 6778
<!-- 1、当鼠标移入input的时候，让div1显示，当鼠标移除input的时候，让div1隐藏 2、事件：简单说是代表用户的操作 3、让div1显示出来其实就是将div1的display设为block --> #div1{ width:200px; height:100px; background:#ccc; boder:1px solid; di
（20）JS实现简单的图片向左无缝滚动
虚心求学_一点一滴
05-31 6723
思路： *{margin:0;padding:0;} #div1{width: 712px;height: 108px;margin:100px auto;position: relative;background: red;overflow: hidden;} #div1 ul{position: absolute;left: 0;top: 0;} #div1 ul li{floa
（7）通过js改变文本框中的文字
虚心求学_一点一滴
05-25 3912
思路： 可以在一个文本框的旁边放置一个按钮，然后点击这个按钮的时候，
vue鼠标移入移出变色
03-10
对于这个问题，我可以回答。您可以使用Vue的指令v-bind来绑定样式，然后使用mouseover和mouseout事件来改变绑定的样式。例如，您可以这样写： <div v-bind:style="{ backgroundColor: color }" @mouseover="color = 'red'" @mouseout="color = 'blue'">鼠标移入移出我会变色</div> 这样，当鼠标移入时，背景颜色会变成红色，当鼠标移出时，背景颜色会变成蓝色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值