首頁  >  文章  >  web前端  >  JQuery動態新增和刪除表格行的方法_jquery

JQuery動態新增和刪除表格行的方法_jquery

WBOY
WBOY原創
2016-05-16 16:10:341271瀏覽

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

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

複製程式碼 程式碼如下:
//記錄新增行數
var areaCount=1;
//記錄實際表格行數
var rowCount=1;
//刪除模板html
var delRowTemplete = "刪除";
//表格行範本
var addRowTemplete= "";
$(function(){
//先取出需要複製的模板,模板行id為rowTemplete_0
addRowTemplete=  $("#rowTemplete_0").html();
});
//增加行
function addBatchRow(type){
var templete = $(" ");
//遞增序號,替換掉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程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn