一个JQuery操作Table的好方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(function (){
  //1.鼠标移动行变色   
  $("#table1 tr").hover(function(){
   $(this).children("td").addClass("hover");     
  },function(){
   $(this).children("td").removeClass("hover");     
  })    
  $("#table2 tr:gt(0)").hover(function() {
   $(this).children("td").addClass("hover");
  }, function() {
   $(this).children("td").removeClass("hover");     
  });
  //2.奇偶行不同颜色    
  $("#table3 tbody tr:odd").css("background-color", "#bbf");
  $("#table3 tbody tr:even").css("background-color","#ffc");
  $("#table3 tbody tr:odd").addClass("odd");
  $("#table3 tbody tr:even").addClass("even");
  
  //3.隐藏一行   
  $("#table3 tbody tr:eq(3)").hide();
  
  //4.隐藏一列  
  $("#table5 tr td::nth-child(3)").hide();
  $("#table5 tr").each(function(){$("td:eq(3)",this).hide()});
  
  //5.删除一行 // 删除除第一行外的所有行     
  $("#table6 tr:not(:first)").remove();
  
  //6.删除一列 // 删除除第一列外的所有列
  $("#table6 tr td:not(:nth-child(1))").remove();
  //7.得到(设置)某个单元格的值//设置table7,第2个tr的第一个td的值。
        $("#table7 tr:eq(1) td:nth-child(1)").html("value");
  //获取table7,第2个tr的第一个td的值。
        $("#table7 tr:eq(1) td:nth-child(1)").html();
  
  //8.插入一行://在第二个tr后插入一行
  $("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
  });
 </script>
</head>
<body>
    <table id="table1">
  <tr>
   <th>文章标题</th>
   <th>文章分类</th>
   <th>发布时间</th>
   <th>操作</th>
  </tr>
  <tr>
   <td>测试</td>
   <td>测试</td>
   <td>测试</td>
   <td>测试</td>
  </tr>
  <tr>
   <td>测试</td>
   <td>测试</td>
   <td>测试</td>
   <td>测试</td>
  </tr>
  <tr>
   <td>测试</td>
   <td>测试</td>
   <td>测试</td>
   <td>测试</td>
  </tr>
 </table>
 <table id="table2">
 <tr>
 <td>文章标题</td>
 <td>文章分类</td>
 <td>发布时间</td>
 <td>操作</td>
 </tr>
 <tr>
 <td>测试</td>
 <td>测试</td>
 <td>测试</td>
 <td>测试</td>
 </tr>
 <tr>
 <td>测试</td>
 <td>测试</td>
 <td>测试</td>
 <td>测试</td>
 </tr>
 <tr>
 <td>测试</td>
 <td>测试</td>
 <td>测试</td>
 <td>测试</td>
 </tr>
 </table>
 <table id="table3">
  <thead>
   <tr>
    <td>文章标题</td>
    <td>文章分类</td>
    <td>发布时间</td>
    <td>操作</td>
   </tr>    
  </thead> 
  <tbody>  
   <tr>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>    
   <tr>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>       
   <tr>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>     
  </tbody>
 </table>
 <table id="table4">
  <thead>   
   <tr>
    <td>文章标题</td>
    <td>文章分类</td>
    <td>发布时间</td>
    <td>操作</td>
   </tr>     
  </thead>  
  <tbody>   
   <tr>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>       
   <tr>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>       
   <tr>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>       
   <tr>
    <td>测试3</td>
    <td>测试</td>
    <td>测试</td>
    <td>测试</td>
   </tr>    
  </tbody>
 </table>
</body>
</html>

  

posted @ 2012-08-16 13:12  microsoftzhcn  阅读(262)  评论(0编辑  收藏  举报