jquery操作table表格

一、数据准备  <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>  

二、操作<script type="text/javascript">//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)"));

//删除指定行（第二行）
 $("#table3 tr:gt(0):eq(1)").remove();

(2)删除列，比如删除表格中的第二列：

//eq:获取子元素索引从 0 开始，先删除表头
$("#table3 tr th:eq(1)").remove();
//nth-child:获取子元素从 1 开始
$("#table3 tr td:nth-child(2)").remove();

 (3)删除其它行，比如第二行之外的所有行：

 $("#table3 tr:gt(0):not(:eq(1))").remove();

(4)删除其它列，比如第二列之外的所有列：

//先删除表头
$("#table3 tr th:not(:eq(1))").remove();
$("#table3 tr td:not(:nth-child(2))").remove();

 (5)隐藏行，比如隐藏第二行：

 $("#table3 tr:gt(0):eq(1)").hide();
//或者
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");

$("#table3 tr th:eq(1)").hide();
 $("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");

</script>