jQuery隔行变色与普通JS写法的对比

复制代码 代码如下:

  <style type="text/css">

  body {

  font-size:12px;text-align:center;

  }

  #tbStu {

  width:260px;border:1px solid #666;background-color:#eee;

  }

  #tbStu tr {

  line-height:23px;

  }

  #tbStu tr th {

  background-color:#ccc;color:#fff;

  }

  #tbStu .trOdd {

  background-color:#fff;

  }

  </style>

  <script src="jQuery/jquery-1.9.1.js"></script>

  <script type="text/javascript">

  //普通JS写法

  //window.onload = function () {

  // var oTb = document.getElementById('tbStu');

  // for (var i = 0; i < oTb.rows.length-1; i++) {

  // if (i % 2)

  // {

  // oTb.rows[i].className = "trOdd";

  // }

  // }

  //}

  //jQuery选择器写法(选择table的行,隔一行,选择一行)

  $(function () {

  $('#tbStu tr:nth-child(even)').addClass("trOdd");

  //jQuery给一个DIV复制内容时,不需要检测该DIV是否存在

  // $('#divMain').html('这是一个检测页面');

  })

  </script>

  </head>

  <body>

  <table id="tbStu" cellpadding="0" cellspacing="0" >

  <tbody>

  <tr>

  <th>学号</th><th>姓名</th><th>性别</th><th>部分</th>

  </tr>

  <tr>

  <td>1001</td><td>张小明</td><td>男</td><td>320</td>

  </tr>

  <tr>

  <td>1002</td><td>李明琪</td><td>女</td><td>350</td>

  </tr>

  <tr>

  <td>1003</td><td>张三</td><td>男</td><td>150</td>

  </tr>

  </tbody>

  </table>

  </body>