JQ实现双色表格

    上次用javascript实现了上色表格,见<JS实现双色表格>。但通过jQuery强大的

选择器可更加简洁，优雅的实现。

    不多说了，直接给代码

 

代码

< 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 >

 

 

转载于:https://www.cnblogs.com/icescut/archive/2009/12/07/jQueryTwocolorTable.html