jquery里操作table表格的各种方法
作者：互联网
<!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( "," ));
|
标签：jquery,function,表格,tr,aijquery,table,td,eq 来源： https://www.cnblogs.com/fireicesion/p/16522278.html