jquery实现奇偶行赋值不同css值

时间:2023-03-09 15:55:07
jquery实现奇偶行赋值不同css值
<html>
<head>
  <title>jquery奇偶行css效果</title>
  <script src="../../jquery/jquery.js" type="text/javascript"></script>
  <style type="text/css">
    /*table中偶数行*/
    .tabEven
    {
      background: #9d8e8b;
    }
    /*table中奇数行*/
    .tabOdd
    {
    background: #ffffff;
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#datalist tr:even").addClass("tabEven");//给偶数行加样式
      $("#datalist tr:odd").addClass("tabOdd"); //给奇数行加样式
    });
  </script>
</head>
<body>
  <table id="datalist">
    <tr><td>第1行</td></tr>
    <tr><td>第2行</td></tr>
    <tr><td>第3行</td></tr>
    <tr><td>第4行</td></tr>
    <tr><td>第5行</td></tr>
  </table>
</body>
</html>