jquery mysql表格_jquery对table表格的常用操作

一、删除行

//删除除第一行外的所有行

$("#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

{

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

{

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 = "

新行第一列新行第二列新行第三列新行第四列新行第五列";

$("#table3 tr:last").after(newRow);

//在第二行之后插入

var newRow = "

新行第一列新行第二列新行第三列新行第四列新行第五列";

$("#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("

第二行第三列")

八、表格奇偶行变色

$(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")

});