js实现隔行变色操作鼠标经过效果

最新推荐文章于 2023-11-19 11:09:06 发布
最新推荐文章于 2023-11-19 11:09:06 发布
阅读量768 收藏
点赞数
分类专栏： HTML JavaScript CSS XHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxingxing198812/article/details/16945955
版权
JavaScript 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏
XHTML
3 篇文章 0 订阅
订阅专栏
js实现隔行变色操作鼠标经过效果，下面是javascript代码 

<script type="text/javascript">

	/**隔行变色**/
	function changColor()
	{
	
		var table_Element = document.getElementById("table_style");
		var tr_Element = table_Element.rows;
		for(var i=0;i<tr_Element.length;i++)
		{
			if(i%2==0)
			{
				tr_Element[i].className = "tr_style_1";
			}else
			{
				tr_Element[i].className = "tr_style_2";
			}
		}
	}	
	
	/**鼠标经过的效果**/
	function tr_color()
	{
		var table_Element = document.getElementById("table_style");
		var tr_Element = table_Element.rows;
		for(var i=0;i<tr_Element.length;i++)
		{
			tr_Element[i].old_class = tr_Element[i].className;   //先让这个类old_class属性记住它以前的样式
			tr_Element[i].onmousemove = function ()
			{
				 this.className = "tr_style";
			}
			tr_Element[i].onmouseout = function ()
			{
				this.className = this.old_class;         //当鼠标移开之后还原以前的样式
			}
			
		}
	}
	
	/**当页面加载时执行**/
	window.onload = function (){
		changColor();
		tr_color();
	}
	
</script>


下面是css代码 
<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}

/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>


下面是完整代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现隔行变色操作鼠标经过效果</title>

<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}

/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>

<script type="text/javascript">

	/**隔行变色**/
	function changColor()
	{
	
		var table_Element = document.getElementById("table_style");
		var tr_Element = table_Element.rows;
		for(var i=0;i<tr_Element.length;i++)
		{
			if(i%2==0)
			{
				tr_Element[i].className = "tr_style_1";
			}else
			{
				tr_Element[i].className = "tr_style_2";
			}
		}
	}	
	
	/**鼠标经过的效果**/
	function tr_color()
	{
		var table_Element = document.getElementById("table_style");
		var tr_Element = table_Element.rows;
		for(var i=0;i<tr_Element.length;i++)
		{
			tr_Element[i].old_class = tr_Element[i].className;   //先让这个类old_class属性记住它以前的样式
			tr_Element[i].onmousemove = function ()
			{
				 this.className = "tr_style";
			}
			tr_Element[i].onmouseout = function ()
			{
				this.className = this.old_class;                //当鼠标移开之后还原以前的样式
			}
			
		}
	}
	
	/**当页面加载时执行**/
	window.onload = function (){
		changColor();
		tr_color();
	}
	
</script>
</head>

<body>
	<table border="1" width="200" height="150" id="table_style" cellpadding="0" cellspacing="0">
    	<tr>
        	<td>中国</td>
            <td>中国</td>
            <td>中国</td>
        </tr>
       <tr>
        	<td>美国</td>
            <td>美国</td>
            <td>美国</td>
        </tr>
        <tr>
        	<td>俄罗斯</td>
            <td>俄罗斯</td>
            <td>俄罗斯</td>
        </tr>
        <tr>
        	<td>日本</td>
            <td>日本</td>
            <td>日本</td>
        </tr>
        <tr>
        	<td>新加坡</td>
            <td>新加坡</td>
            <td>新加坡</td>
        </tr> 
    </table>
</body>
</html>
Francis_yxx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS之隔行变色
小书包的博客
01-09 864
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
【JS】原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 486
就是 这个 IntersectionObserver 对象， MDN 中有介绍， vue3 版本的 vueuse/core 其实也是根据这个封装的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
JS代码实现：鼠标悬停与离开（两种方式）
kuaixiao0217的博客
04-21 1万+
用JS代码实现两种方式的鼠标悬停与离开
js实现隔行换色
最新发布
xiaohua0708day的博客
11-19 489
2.获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。6.设置背景颜色(.style.backgroundColor)第一步：确定事件(onload)并为其绑定一个函数。5.获取奇数行和偶数行(对遍历中角标对2取余)第五步：获取奇数行和偶数行(角标对2取余)1.确定事件(页面加载事件onload)第六步：分别对奇数行和偶数行设置背景颜色。第四步：对tbody里面的行进行遍历。4.JS的遍历(for循环)第二步：书写函数(获取表格)
JS隔行变色，鼠标悬停变色
u011927449的博客
11-08 410
<style> *{ margin:0; padding:0; } div{ width:300px; height:50px; margin:20px; } .activeColor...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
12-11
表格隔行变色，也是一个提高用户体验的js效果。 效果实现： 表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。 鼠标移入某行时变颜色，移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。 表格点击...
纯JS代码实现隔行变色鼠标移入高亮
10-21
主要介绍了纯JS代码实现隔行变色鼠标移入高亮的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
JS实现li各行变色，且在各行变色基础上实现鼠标移入变色，移除变为原来的颜色
GrowingRick的博客
02-15 2685
1、JS实现隔行变色 <body> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <li>ddddddd</li> <li&g...
【原生js】实现表格悬浮变色
在热爱技术的路上一直前行。
05-20 470
1. 思路 用到的事件：mouseover（鼠标经过）、mouseout（鼠标离开）； 鼠标经过tr行，当前行背景变色，鼠标离开背景颜色恢复； 注意：thead中的行无需变色，只需要操作tobody中的行即可； 2. 代码 2.1 html <table> <thead> <tr> <th>姓名</th> <th>学号</th> <th>
js Table鼠标滑过变色,单击变色,隐藏某列的方法
——————————————
10-22 2618
/**         *table变色方法          *         *@param tableId 需要设置变色的table的ID         *@param overColor 鼠标经过(悬浮在此行上)的颜色         *@param outColor 鼠标离开此行后的颜色         *@param clickColor 鼠标单
JavaScript如何实现鼠标悬浮适表格对应行变色？
黑马程序员官方博客
04-27 1187
我们需要通过JS实现鼠标悬浮表格对应行变色的效果，效果在文末。 下面通过代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl
JS实现隔行变色及鼠标滑过变色
08-23 178
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景","经过时字色","经过后字色",开始变色的行号);调用：senfe("table1", "#FFF", "#EEE", "#1B3243", "#074387", "#FFF", "#666", 2);function senfe(o, a, b, c, d, e, f, g) { va...
JS实现表格隔行变色且悬浮在表格上改变该行颜色透明度
weixin_45445776的博客
10-27 867
通过JS实现表格的隔行变色，当鼠标悬浮在对应行上面，实现背景颜色的加深
js实现鼠标悬浮时表格对应行变色
黄大仙
08-05 1710
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> thead { background-color: #555555; color: green } tbody {
Table中鼠标移动tr变色
qq_23392319的博客
03-28 679
html: {foreach from=$input_arr key=key item=v} <tr style="cursor:hand " οnmοusemοve="changeTrColor(this)"> {/foreach} js: <script type="text/javascript"> function changeTrColor(obj){ var _table=obj.parentNode; for (var i=0;i<_table.ro
js实现鼠标移动到div背景颜色变换，移开还原
热门推荐
weixin_42630877的博客
10-16 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js重温&lt;/title&gt; &lt;/head&gt; &lt;div id="sss" onmouseover = "over
JS-隔行换色+鼠标移上去变色
weixin_45959965的博客
12-17 773
JS-隔行换色+鼠标移上去变色
31.鼠标悬浮时动态改变当前行的背景色 各行换色
weixin_33851177的博客
08-22 226
2019独角兽企业重金招聘Python工程师标准>>> ...
实现新闻标题隔行变色的效果js
05-18
你可以通过 JavaScript 来实现新闻标题隔行变色的效果。以下是一个简单的示例： HTML： ```html 新闻标题 1 新闻标题 2 新闻标题 3 新闻标题 4 新闻标题 5 ``` CSS： ```css /* 偶数行的背景色为灰色 */ ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值