jquery里操作table表格的各种方法及完整的在线实例演示推荐 亲测 原创 收藏

文章标签: jquery table
  • :
  • 06-14 21:47
  • :
  • 788次
  • :
  • 0条
  • 14赞

简介本文站长总结了jquery里与table相关的各种操作方法,并且还有完整的在线实例演示,通过本文,可以让你掌握jquery里对表格table的各种操作方法。l

本文站长总结了在jquery里对table表格的各种操作方法,并且还准备了完整的在线实例演示:

jquery里操作table相关的各种方法在线演示

下面是上面这个在线实例的截图:

1.鼠标经过时换色:

$("#table tr").hover(function(){
    $(this).children("td").addClass("on");
},function(){
    $(this).children("td").removeClass("on")
});


2.奇偶行不同颜色:

//偶数行 奇数行的话 odd改为even	
$("#table tr:odd").find("td").css("background-color","#e7ffff");


3.动态插入一行:

//在表格的末尾添加一行	
$("#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.动态插入一列:

//在表格的末尾添加一列   
$("#table tr").append('<td>newTD</td>');   
//在表格的开头添加一列   
$("#table tr").prepend('<td>newTD</td>');   
//在表格的第二列后添加一列   
$("#table tr td:nth-child(2)").after('<td>newTD</td>');


5.显示/隐藏第三行:

//切换第三行的状态 如果隐藏则显示 如果处在显示状态则隐藏
$("#table tr").eq(2).toggle();
//隐藏
$("#table tr").eq(2).hide();
//显示
$("#table tr").eq(2).show();


6.显示/隐藏第三列:

//第一种方法	
$("#table tr td:nth-child(3)").toggle();
    
//第二种方法    
$("#table tr").each(function(){ 
    //第一种写法   	
    $(this).find("td").eq(2).toggle();
    //第二种写法        
    $("td",$(this)).eq(2).toggle();    
});


7.删除第四行:

$("#table tr").eq(3).remove();


8.删除第五列:

$("#table tr td:nth-child(5)").remove();


9.只留前三行,其它删除:

$("#table tr:gt(2)").remove();


10.删除第2行外所有行:

$("#table tr:not(:eq(1))").remove();


11.删除第2到第4行:

$("#table tr").slice(1,4).remove();


12.只保留第2到第4行,其它全删除:

$("#table tr").not($("#table tr").slice(1,4)).remove();


13.读取第3行第4列的值:

var v=$("#table tr:eq(2) td:eq(3)").html();


14.读取第3列所有的值:

var arr=[];	
$("#table tr").each(function(){    	
    arr.push($(this).find("td").eq(2).html());    
});  	
alert(arr.join(","));


15.读取第3行所有的值:

var arr=[];	
$("#table tr:eq(2) td").each(function(){    	
    arr.push($(this).html());    
});  	
alert(arr.join(","));


您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-20 09:28:25