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

﹏ヽ暗。殇╰゛Y 2022-05-31 11:24 210阅读 0赞

一、需求背景

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

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

二、需求效果：

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

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

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

三、具体代码

1、js部分代码：

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> 
    							
    							</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" />
    									
    								</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>

四、效果

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

![70][]

[70]: /images/20220531/05a597e1e0be4c3dbfb131bfdca5b8fb.png