鼠标悬停改变table的行背景色（相继加手型光标和单击事件）

一、需求背景

    ssh项目从数据库查询数据展示，往往jsp页面做一个table标签，通过<s:iterator>标签遍历生成多个tr标签；

往往还需要查看该行的具体信息等其他相关操作。

二、需求效果：

1、当鼠标悬停在某行，该行背景色改变；

2、紧接着类似<a></a>标签一样，光标变成手型，单击后跳转到指定页面；

3、当鼠标离开后，背景色还原。

三、具体代码

1、js部分代码：

<script type="text/javascript">
$(function(){
//鼠标悬停背景色
	var col="";
    //$("#tb tr")--选择id为tb的table，再选择该table的行tr
    // mouseover--鼠标放上去的事件（悬停）
    //$("#tb tr").mouseover();--给tb的行tr添加鼠标悬停事件
    //slice(1)选择从第二行开始（标题行不需要悬停变色）
    $("#tab tr").slice(1).mouseover(function(){
    	col=$(this).css("background-color");//获取初始背景色
        $(this).css({background: "#99b3ff" });//添加背景色，$(this)表示当前选择的元素。
    });
    // mouseout--鼠标离开的事件
    $("#tab tr").slice(1).mouseout(function(){
        $(this).css("background-color",col);//设置成初始背景色
    });
    
//给第2到第4个td加手型光标和单击事件
    $("#tab tr").slice(1).each(function() {//获取除第一个外的所有tr,each遍历所有的td
    	 $(this).find("td").slice(1,5).mouseover(function(){//获取tr的第2到第4个td,给悬停事件
    		 	var rowId=$(this).parent().attr("rel");//获取该行的id，即rel的属性值
    		 	var url="${ctx}/toReadMail.action?mail.id="+rowId;
    		 	var result="window.location.href="+"\""+url+"\"";
    	    	$(this).css("cursor","pointer");//出现手型
    	    	$(this).attr("onclick",result);//添加一个单击事件
    	    });
	});
});
</script>

2、jsp部分代码：

<table width="90%" border="1px" cellspacing="0" cellpadding="0" id="tab">
						<tr >
							<th align="left" width="10%" >
							<div class="container">
								<span>
									<input type="checkbox" name="allids" class="inputCheck" id="allids">
									<label for="allids" id="lab_ids"></label>
								</span> 全选
							</div> 
							<!-- <input type="checkbox" name="allids" value="" id="allids" class="allids" /> 全选 -->
							</th>
							<th align="center" width="20%" >邮件标题</th>
							<th align="center" width="35%" >邮件内容</th>
							<th align="center" width="10%" >阅读状态</th>
							<th align="center" width="15%" >发送时间</th>
							<th align="center" width="10%" >操作</th>
						</tr>
						<s:iterator value="pager.pageRecords" status="sta">
							<tr <s:if test="#sta.odd">style="background:#eee;"</s:if> rel="<s:property value='id' />">
								<td align="center" height="18px">
									<div class="container">
										<span>
											<input type="checkbox" name="ids" id="ids<s:property value='id' />" class="inputCheck" 
												value="<s:property value='id' />" >
											<label for="ids<s:property value='id' />" id="lab"></label>
										</span>
									</div> 
								<%-- <input type="checkbox" name="ids" value="<s:property value='id' />" id="ids"/> --%>
								</td>
								<td align="center" height="18px" style="white-space: nowrap;<s:if test="readStatus==1">font-weight:normal;</s:if>"><!-- 不换行显示 -->
									<%-- <a href="${ctx}/toReadMail.action?mail.id=<s:property value="id"/>"> --%>
										<s:property value="mailTitle" />
									<!-- </a> -->
								</td>
								<td align="center" height="18px" style="white-space: nowrap;<s:if test="readStatus==1">font-weight:normal;</s:if>">
									<s:property value="mailContent" />
								</td>
								<td align="center" height="18px">
									<s:if test="readStatus==0"><span style="font-weight: bold;">未读</span></s:if> 
									<s:if test="readStatus==1">已读</s:if>
								</td>
								<td align="center" height="18px">
									<s:date name="sendTime" format="yyyy-MM-dd" />
								</td>
								<td align="center" height="18px">
									<a href="javascript:void(0);" class="delete" rel="<s:property value="id"/>">[删除]</a>
								</td>
							</tr>
						</s:iterator>
					</table>

四、效果

效果出来了，只是截图软件截不到手型光标。