JavaScript-实例（表格行颜色间隔显示并高亮）

最新推荐文章于 2022-09-13 20:45:00 发布
最新推荐文章于 2022-09-13 20:45:00 发布
阅读量768 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript 表格行颜色动态间隔显示 高亮显示效果实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwt976647637/article/details/49767629
版权

 

需求：实现表格的行颜色间隔显示，如图所示：



当鼠标在某一行时，实现高亮显示，移走则恢复。



实现：

步骤一：绘制表格。

<body>
<table>
	<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>地址</th>
	</tr>
	<tr >
		<td>张三</td>
		<td>30</td>
		<td>北京</td>
	</tr>
	
	<tr>
		<td>李四</td>
		<td>4</td>
		<td>上海</td>
	</tr>
	
	
	<tr>
		<td>王武</td>
		<td>23</td>
		<td>广州</td>
	</tr>
	
	<tr>
		<td>赵六</td>
		<td>27</td>
		<td>南京</td>
	</tr>
	
	<tr>
		<td>周七</td>
		<td>25</td>
		<td>大连</td>
	</tr>
	
	<tr>
		<td>孙八</td>
		<td>29</td>
		<td>铁岭</td>
	</tr>
	
	
</table>
</body>

步骤二：定义表格样式

将表格样式文件封装到tab.CSS文件中。

则需通过link进行连接。

<linkrel="stylesheet" href="tab.css" />


@charset "utf-8";
/* CSS Document */


table{
	border:#CC0033 1px solid;
	width:60%;
	}
table th{
border:#00FF00 1px solid;
background-color:#FF6699;}
table td{
border:#33FFCC 1px solid;
}

 

步骤三：定义表格行显示样式

<strong> <style type="text/css">

.one{
	background-color:#00FFCC;
	}
.two{
	background-color:#CC3333;
	}
.over{
	background-color:#33FF00;
	}
</style>
</strong>

步骤四：定义方法：


<script type="text/javascript">
 
var name;//这个变量用于将进行高亮显示之前的颜色给记录下来。
function trcolor()
{
 	var tabNode = document.getElementsByTagName("table")[0];//得到table对象
	var trs=tabNode.rows;//得到所有的行对象
	for(var x=1;x<trs.length;x++)
	{
		//实现行颜色间隔显示效果。
		if(x%2==1)  //奇数行，颜色为one这个选择器
			trs[x].className ="one";
		else
			trs[x].className="two";
		//实现高亮显示效果。
		trs[x].onmouseover =function() //onmoouseover是每个行对象的事件属性，动态的添加事件属性 
		{
			name=this.className;   //临时记录高亮之前的颜色
			this.className ="over";
		};
		trs[x].onmouseout =function ()  
		{
			this.className = name;
			
		}
			
	}
	

}



/*function over(trNode)
{
	trNode.className ="over";
	

}
function out(trNode)
{
	trNode.className =name;<p></p><pre name="code" class="html">onmoouseover
这种方法有局限性，如果行比较多，都需要在每一行中加入onmoouseover属性，不采用
}*/
window.onload =trcolor;</script>
 

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  李维涛
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
shell实例手册

				
			

			

				

					yonggeit的博客
				

				

					05-27
					
					5984
					
				

			

		

		

			
				
shell实例手册
1文件{
touch file       # 创建空白文件
rm -rf 目录名      # 不提示删除非空目录(-r:递归删除 -f强制)
dos2unix        # windows文本转linux文本 
unix2dos        # linux文本转windows文本
enca filename ...

			
		

	



                

              
                



	

		

			

				
					
JS实现表格高亮显示

				
			

			

				

					菜狗博客
				

				

					09-05
					
					1527
					
				

			

		

		

			
				
前言：本文内容为表格高亮显示功能，分为两种，第一种各行换色。第二种鼠标移动到对应行，高亮显示



各行换色

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
    &amp;lt;head&amp;gt;
        &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
        &amp;lt;title&amp

			
		

	



                


  
              

                


	

		

			

				
					
JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

				
			

			

				

					weixin_34409703的博客
				

				

					12-10
					
					209
					
				

			

		

		

			
				
思路：
1、获取所有行对象，将需要间隔颜色显示的行对象进行动态的className属性指定；
     前提是：先定义好类选择器，就是说给行对象赋予name.
2、高亮用到两个事件：onmouseover（鼠标进入事件）、onmouseout（鼠标移
     出事件）
3、为了方便可以在遍历行对象时将每一个行对象都进行两个事件属性的制度，并通
     过匿名函数完成该事件的处理；
4、高亮的原...

			
		

	





	

		

			

				
					
表格行高亮显示实现为一个 js 类

				
			

			

				

					木野狐@CSDN Blog
				

				

					09-05
					
					853
					
				

			

		

		

			
				
		HTML>HEAD>TITLE>TITLE>script language="javascript">/////////////////////////////////////////////////////////////////////////////////// 功能：这个类使得被附加的表格可以支持行点击高亮// 参数：//            tbl:            

			
		

	



		

			
		



	

		

			

				
					
【javascript】表格行间隔显示颜色，并实现高亮显示效果

				
			

			

				

					
				

				

					11-29
					
					1693
					
				

			

		

		

			
				
var name;  //存储tr对象的类名，当鼠标移开时进行恢复
 function trcolor(){  //表格行颜色间隔显示
	 var tabNode = document.getElementsByTagName("table")[0];
	 var trNodes = tabNode.rows;
	 for(var x=1;x<trNodes.length;x++){
		 if(

			
		

	





	

		

			

				
					
Demo-表格行间隔颜色

				
			

			

				

					夜风
				

				

					07-25
					
					623
					
				

			

		

		

			
				
test
	
	
		$(function(){
			
			var tb = document.getElementById("tb");
			var tbody = tb.getElementsByTagName("tbody");
			var trs = tbody[0].getElementsByTagName("tr");
			for (var i = 0; i < trs.le

			
		

	





	

		

			

				
					
JQuery&CSS;&CSS;+DIV实例大全.rar

				
			

			

				

					08-13
				

			

		

		

			
				
站长必备jquery实现combox自动筛选,高亮显示功能  4)菜单   1.jquery+CSS超炫丽横向多级滑动导航菜单   2.jQuery+CSS漂亮蓝色三级菜单下载   3.jquery+css实现简洁两级横向导航菜单,带动态效果   4.jQuery+CSS实现竖...

			
		

	





	

		

			

				
					
公开揭密团队成员开发鸿蒙 OpenHarmony 的完整过程(收获官方7k奖金和开发板等，2w字用心总结)

				
			

			

				

					Wscats
				

				

					11-22
					
					7386
					
				

			

		

		

			
				
背景
随着 OpenHarmony 组件开发大赛结果公布，我们的团队成员被告知获得了二等奖，在开心之余也想将我们这段时间宝贵的开发经验写下来与大家分享，当我们看到参赛通知的时候已经是 9 月中旬的时候，此时已经是作品可以提交的时间了，参考了一些其他作品发现，基于 Canvas 开发的组件目前还没有，那我们就开始计划写一个基于 Canvas 和通用组件一起开发的组件，在这之前由于并没有开发过 OpenHarmony 应用，我们团队成员都没有相关的经验，大家从零开始在摸索，我们首先分工合作，有的成员负责去下载 

			
		

	





	

		

			

				
					
ECharts-Javascript的图表库推荐

					
热门推荐

				
			

			

				

					Wave的专栏
				

				

					05-02
					
					2万+
					
				

			

		

		

			
				
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

			
		

	





	

		

			

				
					
2020-06 前端技术汇总

				
			

			

				

					鲨了泥的博客
				

				

					06-10
					
					904
					
				

			

		

		

			
				
2020/06/30 周二
#为什么有效的URI不能包含空格等其他字符，URI编码方法详解
在JS高程3里介绍URI编码方法时，有这样一个描述：有效的URI中不能包含某些字符，比如空格。使用URI编码方法可以把所有无效的字符替换为特殊的utf-8编码，从而让浏览器能够接受和理解
#为什么有效的URI不能包含空格等其他字符？
在《HTTP权威指南》第2章URL与资源 - 各种令人头疼的字符(p38)里有介绍原因：
URL是可移植的(portable)，它要统一的命名网上所有的资源，意味着要通过各种不同的协议来

			
		

	





	

		

			

				
					
JS实现简洁(隔行换色、高亮显示)表格特效

				
			

			

				

					10-27
				

			

		

		

			
				
JS实现的表格，使用JavaScript编写实现一个简洁的表格，大家参考一下，加入了隔行换色，并且鼠标滑过时还有高亮显示特效，我看到了都目瞪口呆确实相当不错，有兴趣的朋友可以参考下

			
		

	





	

		

			

				
					
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行

				
			

			

				

					09-04
				

			

		

		

			
				
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行

			
		

	





	

		

			

				
					
给表格加间隔行颜色

				
			

			

				

					别在熬夜了！
				

				

					03-05
					
					1598
					
				

			

		

		

			
				
用JS做一样的，



JavaScript code


?





1

2

3

4

5

6

7

8

9




//首先获取表格所有的行

var rows=document.getElmentById('表格的ID').rows;

for(var i=0;i>rows.length;i++){

			
		

	





	

		

			

				
					
html foreach 行 间隔,颜色,javascript简单实现表格行间隔显示颜色并高亮显示

				
			

			

				

					weixin_36168447的博客
				

				

					06-28
					
					236
					
				

			

		

		

			
				
var name; //存储tr对象的类名，当鼠标移开时进行恢复function trcolor(){ //表格行颜色间隔显示var tabNode = document.getElementsByTagName("table")[0];var trNodes = tabNode.rows;for(var x=1;xif(x%2 == 1)trNodes[x].className = "one" ...

			
		

	





	

		

			

				
					
表单隔行填色

				
			

			

				

					weixin_41404058的博客
				

				

					07-14
					
					372
					
				

			

		

		

			
				
1.JS onload事件（用匿名方式定义事件 ）window.onload=function()2.获取元素表格并绑定id document.getElementById("tbl");3.获取表单行的行数    document.getElementById("tbl").tBodies[1].rows.length;其中tBodies[1]是代表表格tbody位置4.做循环判断奇偶行进行填色...

			
		

	





	

		

			

				
					
js表格中的DOM操作之隔行变色，鼠标进入当前行高亮

				
			

			

				

					慵懒的猫
				

				

					10-14
					
					566
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;style&gt;
			
		&lt;/style&gt;
		&lt;script&gt;
			/**
	

			
		

	





	

		

			

				
					
js中表格隔行变色、隔列变色

				
			

			

				

					qq_53787962的博客
				

				

					09-13
					
					692
					
				

			

		

		

			
				
隔行显色，点击哪一行哪一行显色。
隔列显色，点击哪一列哪一列显色。

			
		

	





	

		

			

				
					
控制表格行的高亮显示

				
			

			

				

					BTS__TING的博客
				

				

					11-23
					
					160
					
				

			

		

		

			
				
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标点击表格行高亮显示</title>
<style>
.selected{
	background:pink;
}
</style&g...

			
		

	





	

		

			

				
					
【JS学习总结】如何使用JS实现表格高亮显示

				
			

			

				

					ghscarecrow的博客
				

				

					08-21
					
					995
					
				

			

		

		

			
				
前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平常的网站开发中，我们常常会遇到这样的一个需求，就是需要实现表格高亮显示，所谓的高亮显示又是怎么一回事呢？其实就是当我们的鼠标移进表格的某一行，某一行就会改变原来的背景颜色，而当我们把鼠标移出的时候，表格的某一行又会恢复到原来的背景颜色，那么这种效果是怎么实现的...

			
		

	





	

		

			

				
					
动态创建表格行：JavaScript配合ASP后台数据库实例

				
			

			

				

					
				

			

		

		

			
				
在本文中，我们将探讨如何在Web应用开发中实现JavaScript动态添加表格数据行，并结合ASP（VBScript）后台处理数据，将用户的输入保存到数据库中。这个场景常见于用户填写简历时，需要添加项目经验部分，允许用户根据...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值