波斯马BOSSMA Information Technology

使用Jquery可以简化很多代码量，实现表格选中行变色、鼠标划过行变色与隔行变色都是So Easy的事情。

先来看看示例：点击这里查看。

实现上边的功能共需要4步，有兴趣的可以自己试试。

第1步：引入Jquery。

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

国内有不少CDN的服务，不用使用本地文件，当然使用本地文件也没有问题。

第2步：定义表格。

<table id="goodtable" cellpadding="0" cellspacing="0" border="0">
<tr><td>能源行业反腐或还有大动作:几名领导早已被盯上</td></tr>
<tr><td>中纪委：2名省部级官员因大办婚丧喜庆被处分</td></tr>
<tr><td>中央再整会所歪风:重点针对对少数人开放场所</td></tr>
<tr><td>专家:北京疏散500万人计划不太可能被采纳</td></tr>
<tr><td>去年全国公务员录用人数20.4万 五年增长57%</td></tr>
<tr><td>美官员:此前所得声音信号或不来自MH370黑匣子</td></tr>
<tr><td>南京部分护学岗交警将配枪上岗 正集中培训</td></tr>
<tr><td>中国7000人旅行团在美唱国歌 人均消费1万美元</td></tr>
<tr><td>博纳老总前妻起诉分数亿家产:他接触演员后变了</td></tr>
</table>

第3步：定义表格变色的样式，在html页面的head节点中增加相关样式定义。

<style type="text/css">
table{border:1px solid #666666;}
table tr{height:30px;line-height:30px;}

/* 隔行样式 */
.tr_odd{
	background-color:#93FF93;
}

.tr_even{
	background-color:#F8F8F8;
}

/* 划过行样式 */
.tr_hover{
	background-color:#FFFF93;
}

/* 选中行样式 */
.tr_selected{
	background-color:#C8C5FC;
}
</style>

第4步：添加表格行初始、选中、划过时的jquery脚本处理。

<script type="text/javascript">
// 定义选中行
var selected_tr;

$(function(){
	// 隔行变色
	$("#goodtable tr").addClass("tr_odd");
	$("#goodtable tr:even").addClass("tr_even");
	
	// 划过行变色
	$("#goodtable tr").live("mouseover",function(){
		$(this).addClass("tr_hover");
	})
	.live("mouseout",function(){
		$(this).removeClass("tr_hover");
	});
	
	// 选中行变色
	$("#goodtable tr").live("click",function(){
		if(selected_tr!=null){
			selected_tr.removeClass("tr_selected");
		}

		$(this).addClass("tr_selected");
		
		// 设置选中行为当前行
		selected_tr = $(this);
	});
});
</script>

关键字: background-color jquery 滑过行变色 选中行变色 隔行变色