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();