zoukankan      html  css  js  c++  java
  • 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="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文件,那么就可以一次性实现所有页面鼠标滑过整行变色,而没必要每个页面都去做相同的设置

  • 相关阅读:
    【C#技术】一篇文章搞掂:LLBL
    【前端技术】一篇文章搞掂:JS
    dapper 分页根据时间条件查询时中的一个坑
    后台页面常用模板
    JMeter强大的性能测试工具
    批量生成xml文件数据C#实现
    asp.net mvc中用 log4net记录日志到数据库中
    asp.net mvc model attribute and razor and form and jquery validate 完美结合
    前端素材网站
    原生dapper中新增用户后根据用户id,在用户角色表中添加关联数据,事务处理
  • 原文地址:https://www.cnblogs.com/llfddmm/p/7888953.html
Copyright © 2011-2022 走看看