zoukankan      html  css  js  c++  java
  • JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () {
    
        $(".Pub_TB tbody tr:even td").css("background-color", "#dbdbdb"); //隔行换色
    
        /*************/
        //鼠标滑过的样式
        $(".Pub_TB tbody tr:odd ").attr("bg", "#e8e8e8");
        $(".Pub_TB tbody tr:even").attr("bg", "#dbdbdb");
    
        $(".Pub_TB tbody tr td").mouseover(function () {
            $(this).parent().find("td").css("background-color", "#bdb9b9");
        });
        $(".Pub_TB tbody tr td").mouseout(function () {
            var bgc = $(this).parent().attr("bg");
            $(this).parent().find("td").css("background-color", bgc);
        });
    
        /*************/
       
    })
    <table class="Pub_TB">
      <tr>
      <th style="5%">序号</th>
      <th>项目名称</th>
      <th style="10%">送报月份</th>
      <th style="15%">送报状态</th>
      <th style="20%">提醒方式</th>
      <th style="15%">管理</th>
      </tr>
      <tbody>
      <tr>
      <td>01</td>
      <td>川南步行街</td>
      <td>2016.01.01</td>
      <td></td>
      <td><span>短信提醒</span><span>邮箱提醒</span></td>
      <td class="oper"><a href="">[查看]</a>
      <a href="">[修改]</a>
      <a href="">[报送]</a></td>
      </tr>
      <tr>
      <td>01</td>
      <td>川南步行街</td>
      <td>2016.01.01</td>
      <td></td>
      <td><span>短信提醒</span><span>邮箱提醒</span></td>
      <td class="oper"><a href="">[查看]</a>
      <a href="">[修改]</a>
      <a href="">[报送]</a></td>
      </tr>
      <tr>
      <td>01</td>
      <td>川南步行街</td>
      <td>2016.01.01</td>
      <td></td>
      <td><span>短信提醒</span><span>邮箱提醒</span></td>
      <td class="oper"><a href="">[查看]</a>
      <a href="">[修改]</a>
      <a href="">[报送]</a></td>
      </tr>
        </tbody>
      </table>

    注意tbody

  • 相关阅读:
    声明式事务
    创建索引之代码开发
    Lucene实现全文检索的流程
    9)添加对话框的按键处理消息
    8)添加一个新的非模态对话框
    7)给tab下面添加一个子非模态对话框
    6)对(5)的代码进行一下修改 但是功能不变
    5)添加一个tab
    4)创建一个简单页面
    3)为啥(2)的代码那么写的原因
  • 原文地址:https://www.cnblogs.com/qigege/p/5198146.html
Copyright © 2011-2022 走看看