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