你的位置:首页 > Java教程

[Java教程]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", "");

(6)隐藏列,比如隐藏第二列:
$("#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>