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

  • 相关阅读:
    20191211 HNOI2017 模拟赛 问题A
    20191211 HNOI2017模拟赛 C题
    BZOJ 3681 Arietta
    netcore3.1中的Json操作
    netcore2.2出现的新特性HealthCheck
    MVC为什么要使用TagHelper?
    psql备份csv文件
    DataAnnotations的使用及细节处理
    记录一次mac安装node遇到的错误
    记录一次netcore3.0 code first使用迁移命令报错问题
  • 原文地址:https://www.cnblogs.com/qigege/p/5198146.html
Copyright © 2011-2022 走看看