js表格自动隔行变色

tr.odd td {
	color: #223;
	background-color: #ec8;
}
tr.highlight td {
	color: #223;
	background-color: #e3e3e3;
} 

 asda

/**
* 隔行换色,鼠标移动上色
* Create by phoenix @ 2013-11-19
*/

(function ($) {
	$.fn.tabChColor = function (options) {
		var options = options || {};
		
		$(this).find('tr:even').addClass('smallblack');
		
		$(this).find('tr').hover(
			function () {
				$(this).addClass('overcolor');
			},
			function () {
				$(this).removeClass('overcolor');
			}
		);
	}
})(jQuery);

 

 

//表格自动隔行变色,要变色的表格加上id属性
function stripeTables() {
	if (!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table");
	for (var i=0; i<tables.length; i++) {
		var odd = false;
		//alert(tables.length);
		if(tables[i].id){ //加id属性的显示
			var rows = tables[i].getElementsByTagName("tr");
			for (var j=0; j<rows.length; j++) {
				//alert(rows.length);
				if (odd == true) {
					addClass(rows[j],"odd");
					odd = false;
				}else {
					odd = true;
				}	
			}
		}
	}
}
//表格自动高亮显示光标所在行
function highlightRows() {
	if (!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table");
	for (var i=0; i<tables.length; i++) {
		if(tables[i].id){ //加id属性的显示
			var rows = tables[i].getElementsByTagName("tr");
			for (var j=0; j<rows.length; j++) {
				rows[j].oldClassName = rows[j].className;
				rows[j].onmouseover = function() {
					addClass(this,"highlight");	
				}
				rows[j].onmouseout = function() {
					this.className = this.oldClassName;	
				}	
			}
		}
	}
}

addLoadEvent(stripeTables);
addLoadEvent(highlightRows);

//点击tr后将tr所在的checkbox改变,
var old_row_bg;
var selected_row;
function selectRow(comp,setTo,value){    
	if(selected_row!=null){
		selected_row.style.backgroundColor=old_row_bg;
	}
	selected_row=comp;
	old_row_bg=comp.style.backgroundColor;
	comp.style.backgroundColor="#FFFF55";
	document.getElementById(setTo).checked=!document.getElementById(setTo).checked;
}

你可能感兴趣的:(J#)