<!doctype html> <html lang="en"> <head> <title>jquery里操作table相关的各种方法在线演示-aijQuery.cn</title> <script src="/static/jquery-3.1.1.min.js"></script> <style type="text/css"> .on {background-color:#ddd} </style> </head> <body style="text-align:center"><div class="m-1"></div> <h3>jquery操作table的各种方法</h3><div class="m-2"></div> <table id="aijquery" border="1" cellpadding="7" cellspacing="0" align="center"> <tr><td>测试1.1</td><td>测试1.2</td><td>测试1.3</td><td>测试1.4</td><td>测试1.5</td><td>测试1.6</td></tr> <tr><td>测试2.1</td><td>测试2.2</td><td>测试2.3</td><td>测试2.4</td><td>测试2.5</td><td>测试2.6</td></tr> <tr><td>测试3.1</td><td>测试3.2</td><td>测试3.3</td><td>测试3.4</td><td>测试3.5</td><td>测试3.6</td></tr> <tr><td>测试4.1</td><td>测试4.2</td><td>测试4.3</td><td>测试4.4</td><td>测试4.5</td><td>测试4.6</td></tr> <tr><td>测试5.1</td><td>测试5.2</td><td>测试5.3</td><td>测试5.4</td><td>测试5.5</td><td>测试5.6</td></tr> </table><div class="m-2"></div> <button id="huanse">鼠标经过时换色</button> <button id="jiou">奇偶行不同颜色</button> <button id="addtr">插入一行</button> <button id="addtd">插入一列</button><div class="m-1"></div> <button id="hidetr">隐藏/显示第三行</button> <button id="hidetd">隐藏/显示第三列</button> <div class="m-1"></div> <button id="deltr">删除第四行</button> <button id="deltd">删除第五列</button> <button id="deltrt">删除第二行外所有行</button> <button id="deltrd">删除第2到第4行</button> <div class="m-1"></div> <button id="deltrs">只留前三行</button> <button id="deltrf">只留第二到第四行</button> <div class="m-1"></div> <button id="readtd">读取第三行第四列的值</button> <button id="readtdt">读取第三列所有值</button> <button id="readtr">读取第三行所有值</button> <script language="javascript"> //鼠标经过换色 $("#huanse").on("click",function(){ $("#aijquery tr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("on")}); }); //奇偶行不同颜色 $("#jiou").on("click",function(){ //偶数行 奇数行的话 odd改为even $("#aijquery tr:odd").find("td").css("background-color","#e7ffff"); }); //插入一行 $("#addtr").on("click",function(){ //在表格的末尾添加一行 //$("#aijquery").append('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>'); //在表格的开头添加一行 //$("#aijquery").prepend('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>'); //在表格的第二行后面插入一行 $("#aijquery tr").eq(1).after('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>'); }); //插入一列 $("#addtd").on("click",function(){ //在表格的末尾添加一列 //$("#aijquery tr").append('<td>newTD</td>'); //在表格的开头添加一列 //$("#aijquery tr").prepend('<td>newTD</td>'); //在表格的第二列后添加一列 $("#aijquery tr td:nth-child(2)").after('<td>newTD</td>'); }); //隐藏/显示第三行 $("#hidetr").on("click",function(){ $("#aijquery tr").eq(2).toggle(); }); //隐藏/显示第三列 $("#hidetd").on("click",function(){ //第一种方法 //$("#aijquery tr td:nth-child(3)").toggle(); //第二种方法 $("#aijquery tr").each(function(){ //$(this).find("td").eq(2).toggle(); $("td",$(this)).eq(2).toggle(); }); }); //删除第四行 $("#deltr").on("click",function(){ $("#aijquery tr").eq(3).remove(); }); //删除第五列 $("#deltd").on("click",function(){ $("#aijquery tr td:nth-child(5)").remove(); }); //删除第二行外所有行 $("#deltrt").on("click",function(){ $("#aijquery tr:not(:eq(1))").remove(); }); //只留前三行 $("#deltrs").on("click",function(){ $("#aijquery tr:gt(2)").remove(); }); //删除第2到第4行 $("#deltrd").on("click",function(){ $("#aijquery tr").slice(1,4).remove(); }); //只留第二到第四行 $("#deltrf").on("click",function(){ $("#aijquery tr").not($("#aijquery tr").slice(1,4)).remove(); }); //读取第三行第四列的值 $("#readtd").on("click",function(){ var v=$("#aijquery tr:eq(2) td:eq(3)").html(); alert(v); }); //读取第三列所有值 $("#readtdt").on("click",function(){ var arr=[]; $("#aijquery tr").each(function(){ arr.push($(this).find("td").eq(2).html()); }); alert(arr.join(",")); }); //读取第三行所有值 $("#readtr").on("click",function(){ var arr=[]; $("#aijquery tr:eq(2) td").each(function(){ arr.push($(this).html()); }); alert(arr.join(",")); }); </script> </body> </html>
下面是上面这个在线实例的截图：
1.鼠标经过时换色：
|
1
2
3
4
5
|
$("#table tr").hover(function(){ $(this).children("td").addClass("on");},function(){ $(this).children("td").removeClass("on")}); |
2.奇偶行不同颜色：
|
1
2
|
//偶数行 奇数行的话 odd改为even $("#table tr:odd").find("td").css("background-color","#e7ffff"); |
3.动态插入一行：
|
1
2
3
4
5
6
|
//在表格的末尾添加一行 $("#table").append('<tr><td>new</td><td>new</td></tr>'); //在表格的开头添加一行 $("#table").prepend('<tr><td>new</td><td>new</td></tr>'); //在表格的第二行后面插入一行 $("#table tr").eq(1).after('<tr><td>new</td><td>new</td></tr>'); |
4.动态插入一列：
|
1
2
3
4
5
6
|
//在表格的末尾添加一列 $("#table tr").append('<td>newTD</td>'); //在表格的开头添加一列 $("#table tr").prepend('<td>newTD</td>'); //在表格的第二列后添加一列 $("#table tr td:nth-child(2)").after('<td>newTD</td>'); |
5.显示/隐藏第三行：
|
1
2
3
4
5
6
|
//切换第三行的状态 如果隐藏则显示 如果处在显示状态则隐藏$("#table tr").eq(2).toggle();//隐藏$("#table tr").eq(2).hide();//显示$("#table tr").eq(2).show(); |
6.显示/隐藏第三列：
|
1
2
3
4
5
6
7
8
9
10
|
//第一种方法 $("#table tr td:nth-child(3)").toggle(); //第二种方法 $("#table tr").each(function(){ //第一种写法 $(this).find("td").eq(2).toggle(); //第二种写法 $("td",$(this)).eq(2).toggle(); }); |
7.删除第四行：
|
1
|
$("#table tr").eq(3).remove(); |
8.删除第五列：
|
1
|
$("#table tr td:nth-child(5)").remove(); |
9.只留前三行，其它删除：
|
1
|
$("#table tr:gt(2)").remove(); |
10.删除第2行外所有行：
|
1
|
$("#table tr:not(:eq(1))").remove(); |
11.删除第2到第4行：
|
1
|
$("#table tr").slice(1,4).remove(); |
12.只保留第2到第4行，其它全删除：
|
1
|
$("#table tr").not($("#table tr").slice(1,4)).remove(); |
13.读取第3行第4列的值：
|
1
|
var v=$("#table tr:eq(2) td:eq(3)").html(); |
14.读取第3列所有的值：
|
1
2
3
4
5
|
var arr=[]; $("#table tr").each(function(){ arr.push($(this).find("td").eq(2).html()); }); alert(arr.join(",")); |
15.读取第3行所有的值：
|
1
2
3
4
5
|
var arr=[]; $("#table tr:eq(2) td").each(function(){ arr.push($(this).html()); }); alert(arr.join(",")); |