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

最新推荐文章于 2013-03-27 01:03:00 发布

系统信息

最新推荐文章于 2013-03-27 01:03:00 发布

阅读量2.1k

点赞数

分类专栏： Java体系文章标签： jquery ajax function email table class

Java体系专栏收录该内容

380 篇文章

订阅专栏

本文介绍了一种利用jQuery库实现网页中表格行交替颜色显示的方法，并附带了完整的示例代码。通过简单的jQuery选择器和事件绑定，使得表格不仅具有良好的视觉效果，还能响应用户的鼠标悬停操作。

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />

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知识请访问这里