jquery对table表格的常用操作

2019独角兽企业重金招聘Python工程师标准>>>

一、删除行

//删除除第一行外的所有行 
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();

二、删除一列

 

//删除除第一列外的所有列 
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();

三、得到（设置）某个单元格的值

 

//设置table1,第2个tr的第一个td的值。 
$("#table1 tr:eq(1) td:nth-child(1)").html("value"); 
//获取table1,第2个tr的第一个td的值。 
$("#table1 tr:eq(1) td:nth-child(1)").html();

四、全选或全不选

 

 
//方法一：
//全选或全不选 此传入的参数为event 如：checkAll(event)
 function checkAll(evt)
 {
 evt=evt?evt:window.event;
 var chall=evt.target?evt.target:evt.srcElement;
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++)
 {
 var tr=$(trlist[i]);
 var input=tr.find("INPUT[type='checkbox']");
 input.attr("checked",chall.checked);
 }
 }

//方法二：


//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++)
{
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}

//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").each(function(i)...{
$(this).attr("checked",evt.checked)
});
}

//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}

五、插入新行

 

//在表格最后的位置
var newRow = "<tr style=\\"background:red;\\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:last").after(newRow);


//在第二行之后插入
var newRow = "<tr style=\\"background:red;\\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:eq(1)").after(newRow);

六、合并行单元格

//合并 第二行第二个和第三个单元格
$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:eq(1) td:eq(2)").remove();

七、拆分行单元格

 

$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 1);
$("#table3 tr:eq(1) td:eq(1)").after("<td>第二行第三列</td>")

八、表格奇偶行变色

 

$(document).ready(function (){
    //奇偶行不同颜色
    $("#table2 tbody tr:odd").addClass("odd"),
    $("#table2 tbody tr:even").addClass("even")

    //或者
    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),
    //$("#table2 tbody tr:even").css("background-color", "#ffc")
});

参考资料：jquery对table表格的常用操作  http://www.studyofnet.com/news/1177.html

转载于:https://my.oschina.net/u/2428791/blog/648582