jQuey实现鼠标滑过整行变色

前面介绍了<display:table>和<display:column>，接下来主要介绍一下鼠标滑过表格，表格行变色如何实现：

<display:table name="requestScope.pageList" id="curPage" class="table table-striped table-hover" sort="external" requestURI="${resource}/test/list.do" export="true">
　　<display:column title="姓名" style="width:20%;" maxLength="12" style="text-align:center;">
　　　　<a href="#" title="查看'${curPage.Name}'" οnclick="openInfoWin('查看',${curPage.id})">${fn:escapeXml(curPage.Name)}</a>
　　</display:column>
　　<display:column title="性别" style="width:10%;">
　　　　<c:choose>
　　　　　　<c:when test="${curPage.sex eq 1}">男</c:when>
　　　　　　<c:when test="${curPage.sex eq 2}">女</c:when>
　　　　</c:choose>
　　</display:column>
　　<display:column title="出生日期" sortable="true" media="html" style="width:20%;">
　　　　<fmt:formatDate value='${curPage.birthDay}' pattern='yyyy-MM-dd' />
　　</display:column>
</display:table>

实现方法1：

<style type="text/css">
　　.hover{
　　　　background-color:#666;
　　}
</style>

jQuery.hoverPlugin={
　　hover:function(selector){
　　　　$(selector).hover(function(){
　　　　　　$(this).addClass("hover");
　　　　},function(){
　　　　　　$(this).removeClass("hover");
  　　});
　　} 
}; 
$.hoverPlugin.hover("#curPage tbody tr");

实现方法2：

jQuery.hoverPlugin={
　　hover:function(selector){
　　　　$(selector).hover(function(){
　　　　　　$(this).css("background-color","#666");
　　　　},function(){
　　　　　　$(this).css("background-color","");
　　　　});
　　}
};
$.hoverPlugin.hover("#curPage tbody tr");

PS：一般情况下我们会选择第二种，只需要把这段jQuery代码放在一个公用的js文件中，然后每个JSP页面引入该js文件，那么就可以一次性实现所有页面鼠标滑过整行变色，而没必要每个页面都去做相同的设置

转载于:https://www.cnblogs.com/llfddmm/p/7888953.html