前面介绍了<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="20%;" maxLength="12" style="text-align:center;"> <a href="#" title="查看'${curPage.Name}'" onclick="openInfoWin('查看',${curPage.id})">${fn:escapeXml(curPage.Name)}</a> </display:column> <display:column title="性别" style="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="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文件,那么就可以一次性实现所有页面鼠标滑过整行变色,而没必要每个页面都去做相同的设置