`

表格隔行换色JS操作函数

阅读更多
/*表格隔行换色等效果
	函数参数说明
	函数名("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
*/
function changeTab(o,a,b,c,d){
	var t = document.getElementById(o).getElementsByTagName("tr");
	for(var i=0;i<t.length;i++){ 
		t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; 
		t[i].onclick=function(){
			if(this.x!="1"){ 
				this.x="1";/* 本来打算直接用背景色判断,FF获取到的背景是RGB值,不好判断 */
				this.style.backgroundColor=d; 
			}else{ 
				this.x="0"; 
				this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 
			} 
		}
		t[i].onmouseover=function(){ 
			if(this.x!="1")this.style.backgroundColor=c; 
		}
		t[i].onmouseout=function(){ 
			if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 
		} 
	} 
}
分享到:
评论

相关推荐

    实现表格隔行换色效果.rar

    本示例"实现表格隔行换色效果"主要涉及JavaScript(JS)编程和HTML表格元素的使用,旨在通过JS特效提升用户体验。下面将详细解释如何利用JavaScript实现这一功能。 首先,我们需要理解HTML表格的基本结构。`&lt;table&gt;...

    基于Jquery的表格隔行换色,移动换色,点击换色插件

    标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...

    jquery 实现隔行换色

    隔行换色的基本思路是为偶数行添加一种背景色,为奇数行添加另一种背景色,或者仅对奇数行进行操作,以形成对比效果。 jQuery提供了`each()`函数来遍历DOM元素,我们可以利用这个功能来处理表格的每一行。以下是一...

    jquery实现隔行换色特效代码.zip

    以上就是使用jQuery实现表格隔行换色特效的基本方法。这种方法可以提高表格的可读性,使用户更容易区分不同的行。当然,实际应用中可能需要根据具体的页面设计调整颜色方案和细节处理,例如添加过渡效果等。 在给定...

    jquery隔行换色和鼠标经过样式

    在网页设计中,为了提升用户体验和视觉效果,我们经常需要对表格或者列表数据进行隔行换色处理,同时实现鼠标经过时的样式变化。jQuery,一个广泛使用的JavaScript库,提供了便利的方法来实现这些功能。本篇文章将...

    基于JavaScript实现表格隔行换色

    在JavaScript中实现表格隔行换色,主要涉及到以下几个关键点: 1. **表格对象与属性**:HTML中的`&lt;table&gt;`元素在JavaScript中可以通过`document.getElementById()`方法获取到,这个对象提供了访问表格内部元素的...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    ### JavaScript表格隔行变色 #### 知识点1:JavaScript表格隔行变色基本原理 JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。...

    Gridview隔行换色

    实现GridView隔行换色主要依赖于JavaScript的DOM操作能力。具体来说,就是通过遍历GridView的所有行元素(`&lt;tr&gt;`),并根据行的索引位置动态地改变其背景颜色。为了达到隔行换色的效果,通常会使用两种或更多的颜色...

    javascript 隔行换色函数代码

    1. JavaScript函数的定义和使用:changeRowsBg是一个定义好的函数,可以被多次调用以实现对不同元素的隔行换色。 2. DOM操作:通过document.getElementsByTagName(tag)方法,JavaScript能够访问到页面中所有的指定...

    表格 隔行换色升级版

    表格隔行换色是一种常见的网页美化技术,主要是为了提高用户在查看大量数据时的可读性和视觉舒适度。在传统的HTML表格中,如果一个页面包含多个表格,每个表格都需要独立设置隔行换色,这可能会导致代码重复和维护...

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色...

    隔行换色 带鼠标划过三种效果

    在网页设计中,隔行换色是一种常见的视觉呈现方式,它可以增强数据的可读性和美观性,尤其是在表格、列表等元素中。本示例聚焦于三种不同的隔行换色效果,包括鼠标划过换色、单纯隔行换色以及鼠标点击换色。这些效果...

    jQuery实现表格隔行换色

    本篇文章将详细讲解如何使用 jQuery 实现表格隔行换色,以及涉及的相关知识点。 首先,我们来看下实现隔行换色的核心代码: ```javascript $(function() { // 隔行换色 $("tbody tr:odd").css("background-color...

    jQuery 隔行换色

    在网页设计中,为了提升用户体验,常常需要对表格或者列表数据进行视觉优化,其中隔行换色是一种常见的方法。jQuery,作为一个轻量级的JavaScript库,提供了强大的DOM操作功能,使得实现这一效果变得简单易行。本文...

    JS实现隔行换色的表格排序

    总结来说,实现JS隔行换色的表格排序涉及到了DOM操作、数据解析、事件处理、CSS样式应用以及数据排序算法等多个核心JavaScript知识点。通过掌握这些技术,你可以创建交互性强、用户体验良好的数据展示表格。

    使用JQ完成表格隔行换色的简单实例

    使用jQuery完成表格隔行换色 &lt;script src="https://code.jquery.com/jquery-1.8.3.min.js"&gt; $(function(){ $("tbody tr:even").css("background-color","gold"); $("tbody tr:odd").css("background-color",...

    原生javascript实现隔行换色

    总的来说,原生JavaScript实现隔行换色的关键在于理解DOM操作、条件语句以及事件处理。通过这种方式,我们可以为网页增加交互性和美观性,提升用户体验。同时,这也是一种很好的实践JavaScript基本技巧的机会,包括...

Global site tag (gtag.js) - Google Analytics