jQuery表格隔行变色 安静点

效果图:

 

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01__表格隔行变色</title>
  <style>
    div, span, p {
      width: 140px;
      height: 140px;
      margin: 5px;
      background: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }

    div.mini {
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }

    div.hide {
      display: none;
    }

    #data {
      width: 600px;
    }

    #data, td, th {
      border-collapse: collapse;
      border: 1px solid #aaaaaa;
    }

    th, td {
      height: 28px;
    }

    #data thead {
      background-color: #333399;
      color: #ffffff;
    }

    .odd {
      background-color: #ccccff;
    }
  </style>
</head>
<body>
<table id="data">
  <thead>
    <tr>
      <th>姓名</th>
      <th>工资</th>
      <th>入职时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Tom</td>
    <td>$3500</td>
    <td>2010-10-25</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>$3400</td>
    <td>2010-12-1</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>King</td>
    <td>$5900</td>
    <td>2009-08-17</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Scott</td>
    <td>$3800</td>
    <td>2012-11-17</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>$3100</td>
    <td>2014-01-27</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Allen</td>
    <td>$3700</td>
    <td>2011-12-05</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  </tbody>
</table>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  //用的是>,所以找的是直属的子元素,是亲子,不是孙子等后代元素
  //找id为data的table下的元素
  $('#data>tbody>tr:odd').css('background', '#ccccff')
  // $('#data>tbody>tr:odd').addClass('odd')
  //$('#data>tbody>tr:odd').attr('class', 'odd')
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/anjingdian/p/15553335.html