1.鼠标经过时换色:
1 $("#table tr").hover(function(){ 2 $(this).children("td").addClass("on"); 3 },function(){ 4 $(this).children("td").removeClass("on") 5 });
2.奇偶行不同颜色:
1 //偶数行 奇数行的话 odd改为even 2 $("#table tr:odd").find("td").css("background-color","#e7ffff");
3.动态插入一行:
1 //在表格的末尾添加一行 2 $("#table").append('<tr><td>new</td><td>new</td></tr>'); 3 //在表格的开头添加一行 4 $("#table").prepend('<tr><td>new</td><td>new</td></tr>'); 5 //在表格的第二行后面插入一行 6 $("#table tr").eq(1).after('<tr><td>new</td><td>new</td></tr>');
4.动态插入一列:
1 //在表格的末尾添加一列 2 $("#table tr").append('<td>newTD</td>'); 3 //在表格的开头添加一列 4 $("#table tr").prepend('<td>newTD</td>'); 5 //在表格的第二列后添加一列 6 $("#table tr td:nth-child(2)").after('<td>newTD</td>');
5.显示/隐藏第三行:
1 //切换第三行的状态 如果隐藏则显示 如果处在显示状态则隐藏 2 $("#table tr").eq(2).toggle(); 3 //隐藏 4 $("#table tr").eq(2).hide(); 5 //显示 6 $("#table tr").eq(2).show();
6.显示/隐藏第三列:
1 //第一种方法 2 $("#table tr td:nth-child(3)").toggle(); 3 4 //第二种方法 5 $("#table tr").each(function(){ 6 //第一种写法 7 $(this).find("td").eq(2).toggle(); 8 //第二种写法 9 $("td",$(this)).eq(2).toggle(); 10 });
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();
补:删除后三行:
1 $("#table tr").slice(-3).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 var arr=[]; 2 $("#table tr").each(function(){ 3 arr.push($(this).find("td").eq(2).html()); 4 }); 5 alert(arr.join(","));
15.读取第3行所有的值:
1 var arr=[]; 2 $("#table tr:eq(2) td").each(function(){ 3 arr.push($(this).html()); 4 }); 5 alert(arr.join(","));
如果上面这种方法不喜欢,那也可以直接按你的意思,我们来直接删除前三行和后四行:
1 $("#table tr:lt(3)").remove(); 2 //lt的意思是获取索引比3小的,索引是从0开始的,也就是获取到的是0 1 2 ,正好是前三行 3 4 //下面来删除后四行, 5 因为不知道你的表格有多少行,所以需要先判断: 6 var max=$("#table tr:last").index();//获取最后一行的索引值 7 //获取比上面索引值小三的行,删除就行 8 var get=max-4;//注意这里是减四 9 $("#table tr:gt("+get+")").remove();