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="width:5%">序号</th>
  <th>项目名称</th>
  <th style="width:10%">送报月份</th>
  <th style="width:15%">送报状态</th>
  <th style="width:20%">提醒方式</th>
  <th style="width: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

转载于:https://www.cnblogs.com/qigege/p/5198146.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值