這篇文章主要介紹了JQuery動態添加和刪除表格行的方法,實例分析了jQuery中動態操作表格行的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JQuery動態添加和刪除表格行的方法。分享給大家供大家參考。具體分析如下：

昨天做頁面表格行動態添加和刪除，看了無數的介紹，發現了一個好東東，JQuery。用它實現起來還真的是很方便，這個是我用到我們平臺的一個方法。

代碼如下:

//記錄添加行數

var areaCount=1;

//記錄實際表格行數

var rowCount=1;

//刪除模板html

var delRowTemplete = "<td><a href='javascript:void(0);' class='content_del' onclick='deleteBatchRow(this)'>刪除</a></td>";

//表格行模板

var addRowTemplete= "";

$(function(){

//首先取出需要克隆的模板，模板行<tr>id為rowTemplete_0

addRowTemplete= $("#rowTemplete_0").html();

});

//增加行

function addBatchRow(type){

var templete = $("<tr id='rowTemplete_"+areaCount+"'></tr>");

//遞增序號，替換掉tr或者td中存在[0]、_0或者(0)防止id相同,這么設計主要是為了后臺取值時方便

templete = templete.append(addRowTemplete.replace(/\[0\]/g,"["+areaCount+"]").replace(/_0/g,"_"+areaCount).

replace("processStat(\"0\")","processStat("+areaCount+")"));

//找到最后一條存在的行,在其后拼接一行

var flag = false;

for(var i=areaCount-1;i>=0;i--){

if($("#rowTemplete_"+i).length>0){ $("#rowTemplete_"+i).after(templete.append(delRowTemplete));

break;}

}

//計數加一

areaCount++; rowCount++;

}

//刪除行

function deleteBatchRow(obj){

if(rowCount>1) {

$(obj).parents("tr").remove();

rowCount--;

} else alert("至少保留一行");//如果全部刪除了，那么也就沒有辦法再添加行了，模板行也被刪了呀

}

//取得條數

function getAreaCount(){

return rowCount;

}

后臺使用的也是比較容易的，在FormBean里面定義數組變量來get和set，很方便的。

希望本文所述對大家的jQuery程序設計有所幫助。

更多信息請查看IT技術專欄