jquery 双色表格实现代码

http://www.glzy8.com/article/21027.htm

  不多说了,直接给代码

  代码

  

复制代码 代码如下:

  <html>

  <head>

  <title>双色表格</title>

  <style type="text/css">

  <!--

  table {

  border:solid 1px black;

  text-align:center;

  border-spacing:0px;

  }

  th,td {

  border:solid 1px black;

  width:100px;

  }

  -->

  </style>

  <script src="lib/jquery.js" type="text/javascript"></script>

  <script type="text/javascript" >

  $().ready(function() {

  $('tr:has(th)').css('background','violet'); //表格标题

  $('tr:even:gt(0)').css('background','yellow'); //偶数行,且行数大于0(即标题)

  $('tr:odd').css('background','olive'); //奇数行

  });

  </script>

  </head>

  <body>

  <center>

  <table>

  <tr id="th">

  <th>姓名</th>

  <th>科目</th>

  <th>成绩</th>

  </tr>

  <tr>

  <td>张三</td>

  <td>语文</td>

  <td>90</td>

  </tr>

  <tr>

  <td>张三</td>

  <td>数学</td>

  <td>87</td>

  </tr>

  <tr>

  <td>李四</td>

  <td>数学</td>

  <td>68</td>

  </tr>

  <tr>

  <td>王五</td>

  <td>英语</td>

  <td>76</td>

  </tr>

  </table>

  </center>

  </body>

  </html>