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

news/2023/11/30 13:26:02

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" 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加上背景色 */
}
tr.over td {
        background : #bcd4ec ;    /* 这个将是鼠标高亮行的背景色 */
}

</ style >
</ head >

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

< 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 > gl.deng@gmail.com </ td >
   </ tr >
   < tr >
     < td > 邓国梁 </ td >
     < td > 24 </ td >
     < td > 31540205 </ td >
     < td > s@sn.hk </ td >
   </ tr >
   < tr >
     < td > 邓国梁 </ td >
     < td > 25 </ td >
     < td > 31540205 </ td >
     < td > gl.deng@gmail.com </ td >
   </ tr >
   < tr >
     < td > 邓国梁 </ td >
     < td > 26 </ td >
     < td > 31540205 </ td >
     < td > gl.deng@gmail.com </ td >
   </ tr >
   < tr >
     < td > 邓国梁 </ td >
     < td > 27 </ td >
     < td > 31540205 </ td >
     < td > gl.deng@gmail.com </ td >
   </ tr >
   < tr >
     < td > 邓国梁 </ td >
     < td > 28 </ td >
     < td > 31540205 </ td >
     < td > gl.deng@gmail.com </ 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知识请访问这里