jquery实现表格的隔行变色

来源:互联网 发布:vivo手机丢了数据恢复 编辑:程序博客网 时间:2024/04/30 13:02

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
     .datalist{
         border-color:#669900;
   font-family:Arial, Helvetica, sans-serif;
   border-collapse:collapse;
   background-color:#66CC99;
  }
  .datalist th{
                 background-color:#669900;
               }
     
  .datalist tr.altrow{
                          background-color:#6699CC;
                      }
</style>
<script src="jquery.min.js"></script>
<!--
<script type="text/javascript">
     window.onload = function(){
       var oTable = document.getElementById("oTable");
    for( var i=0;i<oTable.rows.length;i++){
         if(i%2==0)
          oTable.rows[i].className="altrow";
    }
  }
</script>
-->
<script type="text/javascript">
      $(function(){
      $("table.datalist tr:nth-child(odd)").addClass("altrow"); 
   });
</script>
</head>
<body>
    <table border=1px  class="datalist"  id="oTable">
       <tr>
         <th>name</th>
      <th>class</th>
      <th>birthday</th>
      <th>mobile</th>
      <th>adress</th>
    </tr>
       <tr>
           <td>zhanfsan</td>
     <td>three</td>
     <td>1986-3-21</td>
     <td>34</td>
     <td>44444</td>
    </tr>
    <tr>
           <td>zhanfsan</td>
     <td>three</td>
     <td>1986-3-21</td>
     <td>34</td>
     <td>44444</td>
    </tr><tr>
           <td>zhanfsan</td>
     <td>three</td>
     <td>1986-3-21</td>
     <td>34</td>
     <td>44444</td>
    </tr><tr>
           <td>zhanfsan</td>
     <td>three</td>
     <td>1986-3-21</td>
     <td>34</td>
     <td>44444</td>
    </tr><tr>
           <td>zhanfsan</td>
     <td>three</td>
     <td>1986-3-21</td>
     <td>34</td>
     <td>44444</td>
    </tr>
 </table>
</body>
</html>