<!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 ></div> ?<h3>jquery操作table的各种方法</h3><div ></div><table 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 ></div> ?<button >鼠标经过时换色</button> <button >奇偶行不同颜色</button> <button >插入一行</button> <button >插入一列</button><div ></div> ?<button >隐藏/显示第三行</button> ?<button >隐藏/显示第三列</button> ?<div ></div> ?<button >删除第四行</button> ?<button >删除第五列</button> ?<button >删除第二行外所有行</button> ?<button >删除第2到第4行</button> ?<div ></div> ?<button >只留前三行</button> ?<button >只留第二到第四行</button> ?<div ></div> ?<button >读取第三行第四列的值</button> ?<button >读取第三列所有值</button> ?<button >读取第三行所有值</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 | $("#tabletr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("on")}); |
2.奇偶行不同颜色：
1 2 | //偶数行奇数行的话odd改为even $("#tabletr: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>‘); //在表格的第二行后面插入一行 $("#tabletr").eq(1).after(‘<tr><td>new</td><td>new</td></tr>‘); |
4.动态插入一列：
1 2 3 4 5 6 | //在表格的末尾添加一列$("#tabletr").append(‘<td>newTD</td>‘);//在表格的开头添加一列$("#tabletr").prepend(‘<td>newTD</td>‘);//在表格的第二列后添加一列$("#tabletrtd:nth-child(2)").after(‘<td>newTD</td>‘); |
5.显示/隐藏第三行：
1 2 3 4 5 6 | //切换第三行的状态如果隐藏则显示如果处在显示状态则隐藏$("#tabletr").eq(2).toggle();//隐藏$("#tabletr").eq(2).hide();//显示$("#tabletr").eq(2).show(); |
6.显示/隐藏第三列：
1 2 3 4 5 6 7 8 9 10 | //第一种方法 $("#tabletrtd:nth-child(3)").toggle();//第二种方法$("#tabletr").each(function(){//第一种写法 $(this).find("td").eq(2).toggle();//第二种写法$("td",$(this)).eq(2).toggle();}); |
7.删除第四行：
1 | $("#tabletr").eq(3).remove(); |
8.删除第五列：
1 | $("#tabletrtd:nth-child(5)").remove(); |
9.只留前三行，其它删除：
1 | $("#tabletr:gt(2)").remove(); |
10.删除第2行外所有行：
1 | $("#tabletr:not(:eq(1))").remove(); |
11.删除第2到第4行：
1 | $("#tabletr").slice(1,4).remove(); |
12.只保留第2到第4行，其它全删除：
1 | $("#tabletr").not($("#tabletr").slice(1,4)).remove(); |
13.读取第3行第4列的值：
1 | varv=$("#tabletr:eq(2)td:eq(3)").html(); |
14.读取第3列所有的值：
1 2 3 4 5 | vararr=[]; $("#tabletr").each(function(){ arr.push($(this).find("td").eq(2).html());}); alert(arr.join(",")); |
15.读取第3行所有的值：
1 2 3 4 5 | vararr=[]; $("#tabletr:eq(2)td").each(function(){ arr.push($(this).html());}); alert(arr.join(",")); |
jquery里操作table表格的各种方法
原文地址：https://www.cnblogs.com/trunkslisa/p/9528876.html