昨天做頁面表格行動態(tài)添加和刪除,看了無數(shù)的介紹,發(fā)現(xiàn)了一個好東東,JQuery。用它實現(xiàn)起來還真的是很方便,這個是我用到我們平臺的一個方法。
//記錄添加行數(shù) var areaCount=1; //記錄實際表格行數(shù) 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;} } //計數(shù)加一 areaCount++; rowCount++; }
//刪除行 function deleteBatchRow(obj){ if(rowCount>1) { $(obj).parents("tr").remove(); rowCount--; } else alert("至少保留一行");//如果全部刪除了,那么也就沒有辦法再添加行了,模板行也被刪了呀 } //取得條數(shù) function getAreaCount(){ return rowCount; }
|