@OverWrite BlogJava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  128 随笔 :: 0 文章 :: 29 评论 :: 0 Trackbacks
<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"> 
<!--用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>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知识请访问这里
posted on 2008-02-15 09:33 vesung 阅读(590) 评论(0)  编辑  收藏 所属分类: Ajax/html

只有注册用户登录后才能发表评论。


网站导航: