当前位置: 代码迷 >> Web前端 >> 报表隔行换色
  详细解决方案

报表隔行换色

热度:325   发布时间:2012-10-29 10:03:53.0
表格隔行换色
我表较喜欢用class查找元素

/**
 *根据标签名和类名获取元素
 *@param tagName 标签名
 *@param elementClassName 元素类名
 *@return 标签名和类名为给定参数的元素数组
 */
function getElementsByTagNameAndClassName(tagName,elementClassName){

	var array=new Array();
	
	var elements=document.getElementsByTagName(tagName);
	
	for(var i=0;i<elements.length;i++){
		
		if(elements[i].className==elementClassName){
			
			array.push(elements[i]);
		}
	}
	
	return array;
}

/**
 *表格隔行换色,指定鼠标移到当前行的背景颜色,移出当前行的背景颜色
 *@param className 表格的class属性名
 *@param oddBackgroundColor 表格奇数行背景颜色
 *@param evenBackgroundColor 表格偶数行背景颜色
 *@param mouseoverBackgroundColor 鼠标移到当前行的背景颜色
 */
function tableRowBackgroundColor(className,oddBackgroundColor,evenBackgroundColor,mouseoverBackgroundColor){
	
	var tables=getElementsByTagNameAndClassName("table",className);
	
	for(var i=0;i<tables.length;i++){
		
		var rows=tables[i].rows;
		
		var rowOriginalColor="";
		
		for(var j=1;j<rows.length;j++){
		
			rows[j].style.backgroundColor = j%2==0 ? oddBackgroundColor : evenBackgroundColor;
			
			//鼠标移到当前行,指定当前行的背景颜色。
			rows[j].onmouseover=function(){
				
				rowOriginalColor=this.style.backgroundColor;
				
				this.style.backgroundColor=mouseoverBackgroundColor
			}
			
			//鼠标移出当前行,指定当前行的背景颜色为行的原始颜色。
			rows[j].onmouseout=function(){
			
				this.style.backgroundColor=rowOriginalColor;
			}
		
		}
	}
}




在页面的window.onload中调用tableRowBackgroundColor方法。
  相关解决方案