动态添加列和行 ajax,jQuery实现表格行和列的动态添加与删除方法【测试可用】...

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.cl1{

background-color:#FFFFFF;

}

.cl2{

background-color:#FFFF99;

}

var rowCount = 0;

var colCount = 2;

function addRow(){

rowCount++;

var rowTemplate = '

'+rowCount+'内容'+rowCount+' 删除';

var tableHtml = $("#testTable tbody").html();

tableHtml += rowTemplate;

$("#testTable tbody").html(tableHtml);

}

function delRow(_id){

$("#testTable .tr_"+_id).hide();

rowCount--;

}

function addCol(){

colCount++;

$("#testTable tr").each(function(){

var trHtml = $(this).html();

trHtml += '

增加的td';

$(this).html(trHtml);

});

}

function delCol(_id){

$("#testTable tr").each(function(){

$("td:eq("+_id+")",this).hide();

});

colCount--;

}

function mover(_id){

$("#testTable tr:not(:first)").each(function(){

$("td:eq("+_id+")",this).removeClass("cl1");

$("td:eq("+_id+")",this).addClass("cl2");

});

}

function mout(_id){

$("#testTable tr:not(:first)").each(function(){

$("td:eq("+_id+")",this).removeClass("cl2");

$("td:eq("+_id+")",this).addClass("cl1");

});

}

jquery操作表格测试

序号

内容

操作

希望本文所述对大家jQuery程序设计有所帮助。