<!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(
","
));
|