首先,
一、如果原表格沒有底色的情況下:
<table border="1" style="font-size:15px">
<tr >
<td width="200px" align="center">等級</td>
<td width="200px" align="center">得分</td>
<td width="200px" align="center">每天最大得分</td>
<td width="200px" align="center">等級得分上限</td>
<td width="200px" align="center">等級得分下限</td>
<td width="200px" align="center">功能操作</td>
</tr>
<s:iterator value="%{ranklist}">
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td width="200px" align="center"><s:property value="rankNum"></s:property></td>
<td width="200px" align="center"><s:property value="point"></s:property></td>
<td width="200px" align="center"><s:property value="maxPointEveryday"></s:property></td>
<td width="200px" align="center"><s:property value="rankMaxPoint"></s:property></td>
<td width="200px" align="center"><s:property value="rankMinPoint" ></s:property></td>
<td width="200px" align="center"><a href="RankTable!delRank.action?rankvo.rankNum=<s:property value="rankNum"/>" onclick='return delconfirm()'>刪除</a></td>
</s:iterator>
</table>
可以在tr標籤中直接加上
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">即可實現變色;
二、td有底色的情況下:
首先在樣式中加上 .hover{background-color:#FF0000;}
然後
$(function(){
$('tr').hover(
_mouse_on_=function(){
this._bg=this.style.backgroundColor;
$(this).css('background', 'bisque').find('>td').each(_mouse_on_);
},
_mouse_off_=function(){
$(this).css('background', this._bg).find('>td').each(_mouse_off_);
}
);
});
本文轉自https://www.xuebuyuan.com/2041808.html,親測有效。