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

你可能感兴趣的:(JQuery 表格 隔行换色 和鼠标滑过的样式)