点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" target="_blank" rel="external nofollow" type="application/rss+xml" title="RSS 2.0" /> <script language="javascript"> </script> <script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&out_html=true"></script>

Ajax实现双色表格-采用jquery实现

转自【http://www.blogjava.net/vesung/archive/2008/02/15/180008.html】 < html >

  < head >

   < title > Hello, Ajax world! </ title >

   < script  type ="text/javascript"

    src ="../js/jquery-1.2.1.pack.js" ></ script >

   < script  type ="text/javascript" >       

        $('document').ready( function (){

            $('.stripe tr').mouseover( function (){

                    $( this ).addClass('over');

                }).mouseout( function (){

                    $( this ).removeClass('over');

                    });

                $( " .stripe tr:odd " ).addClass('alt');                    

            });

             function  showV(){

                alert($('email'));

            }

     </ script >

< style >

th  {

        background : #0066FF ;

        color : #FFFFFF ;

        line-height : 20px ;

        height : 30px ;

}  

td  {

        padding : 6px 11px ;

        border-bottom : 1px solid #95bce2 ;

        vertical-align : top ;

        text-align : center ;

}  

td *  {

        padding : 6px 11px ;

}  

tr.alt td  {

        background : #ecf6fc ;   

}  

tr.over td  {

        background : #bcd4ec ;   

}

</ style >

</ head >

< body >

< table  class ="stripe"  width ="50%"  border ="0"  cellspacing ="0"  cellpadding ="0" >  

<!-- 用class="stripe"来标识需要使用该效果的表格 -->

< thead >

   < tr >

     < th > 姓名 </ th >< th > 年龄 </ th >< th > QQ </ th >< th > Email </ th >

   </ tr >

</ thead >

< tbody >

   < tr >

     < td > 邓国梁 </ td >

     < td > 23 </ td >

     < td > 31540205 </ td >

     < td > [email protected] </ td >

   </ tr >

   < tr >

     < td > 邓国梁 </ td >

     < td > 24 </ td >

     < td > 31540205 </ td >

     < td > [email protected] </ td >

   </ tr >

   < tr >

     < td > 邓国梁 </ td >

     < td > 25 </ td >

     < td > 31540205 </ td >

     < td > [email protected] </ td >

   </ tr >

   < tr >

     < td > 邓国梁 </ td >

     < td > 26 </ td >

     < td > 31540205 </ td >

     < td > [email protected] </ td >

   </ tr >

   < tr >

     < td > 邓国梁 </ td >

     < td > 27 </ td >

     < td > 31540205 </ td >

     < td > [email protected] </ td >

   </ tr >

   < tr >

     < td > 邓国梁 </ td >

     < td > 28 </ td >

     < td > 31540205 </ td >

     < td > [email protected] </ td >

   </ tr >

</ tbody >

</ table >

</ body >

</ html >

jquery-1.2.1.pack.js下载地址：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.1.pack.js&can=2&q=

这个例子相当简单， 了解更多jquery知识请访问这里

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script>