JavaScript 動態添加表格行 使用模板、標記

對於複雜的操作情況，比如：添加一行之後，在這一行上還要進行相關的操作會顯得有些吃力；本人比較喜歡錶現層使用模板、標記填充資料的做法，於是自己做手做了個小工具，與大家一起分享。

組件運行：

設計思路：
　　在Table的thead中加入一行隱藏的行，當要添加一行時，複製一次隱藏的行，再將執行個體資料填充到這一行中相應的位置，填充完畢之後，再將這一行加到表格中去，整個操作完成。
模板：隱藏的行即相當於模板，當需要時複製一次模板。
標記：將模板行複製出來後，該如何填充資料？
　　網上比較多的組件的做法是，傳遞進來兩個數組，一組是元素名稱列表，一組是對應的值列表，然後對複製出來的行進行一個尋找，發現其中的元素的名稱在元素名稱列表中的，讓其value=對應的值。這樣做可以滿足一般的需求，因為Table裡面一般放置文字框，將值放到其中即完成任務。對於複雜的情況，要求將資料填充到其它的位置，這種方法就力不從心了。
　　我的做法是將複製進來的模板行看做一段String，在這段String中尋找標記，再將資料填充到相應的標記中去，這樣的話，無論你哪個地方要填充資料，只要放一個標記就可以了，比上面的做法要靈活很多。

代碼實現（關鍵點講解）
　　我定義的標誌為${屬性}，傳遞過去的資料為一個entity，當在String中發現${city}，則表示將entity.city的內容替換${city}，當entity.city為NULL時，用 替換${city}（ 網頁中的空格）。

動態添加行方法 複製代碼 代碼如下:function addInstanceRow(tableId,names,values,functionName){
var tableObj=getTargetControl(tableId);
var tbodyOnlineEdit=getTableTbody(tableObj);
var theadOnlineEdit=tableObj.getElementsByTagName("THEAD")[0];
var elm=theadOnlineEdit.rows[theadOnlineEdit.rows.length-1].cloneNode(true);
elm.style.display="";
if(typeof(names)!="undefined"){
if(typeof(functionName)=="undefined") functionName="setObjValueByName";
if(typeof(values)!="undefined"&&values!=null){
var entity=ArrayToObj(names,values);
setInputValue(elm,entity,functionName);
}
else
setInputValue(elm,names,functionName);
}
tbodyOnlineEdit.appendChild(elm);
}

複製代碼 代碼如下:if(typeof(names)!="undefined"){
if(typeof(functionName)=="undefined") functionName="setObjValueByName";
if(typeof(values)!="undefined"&&values!=null){
var entity=ArrayToObj(names,values);
setInputValue(elm,entity,functionName);
}
else
setInputValue(elm,names,functionName);
}

4，將填充好資料的行添加到表格中去
　　tbodyOnlineEdit.appendChild(elm);

痛點、易出問題點說明

1， 擷取Tbody，ie與firefox有區別，ie在預設的情況下是為table加上tbody的，而firefox則沒有，所以要進行相應的判斷 複製代碼 代碼如下://得到table中的tbody控制項，注意相容firefox
function getTableTbody(tableObj){
var tbodyOnlineEdit=tableObj.getElementsByTagName("TBODY")[0];
if(typeof(tbodyOnlineEdit)=="undefined"||tbodyOnlineEdit==null){
tbodyOnlineEdit=document.createElement("tbody");
tableObj.appendChild(tbodyOnlineEdit);
}
return tbodyOnlineEdit;
}

2， 進行填充時，實現了兩種情況，一種用根據元素的name,別一種則是根據標記填充
Code 複製代碼 代碼如下:// 動態添加表格行
// functionname為“setObjValueByName”為根據元素name，
//要求names為元素名稱，value為相對應的值
//
//functionname為“”為標記填充
//要求names為一個對象，value為null
function addInstanceRow(tableId,names,values,functionName)

3， 進行標誌的填充時，使用Regex進行標記的尋找，找到標記後到entity中取相應的屬性的值，取出屬性的值之後，要用 替換字串中的空格，不然顯示時會有問題，當屬性值為空白時用 替換標記符號，代碼在以下函數中。
Code 複製代碼 代碼如下://根據標誌設定添加值
function setObjValueByFlag(obj,entity){
var objTemp=obj.parentNode;
var arrMatches=objTemp.innerHTML.match(/\${\w+}/g);
if(typeof(arrMatches)=="undefined"||arrMatches==null||typeof(arrMatches.length)=="undefined"||arrMatches.length==null)
return;
var tempValue="";
var propertyValue="";
for(var i=0;i<arrMatches.length;i++){
tempValue=arrMatches[i].replace(/\${|}/g,"");
propertyValue=getEntityPropertyValue(entity,tempValue);
if(propertyValue!=null){
if(typeof(propertyValue)=="string"){
if(propertyValue!="")
propertyValue=propertyValue.replace(/\s/g," ");
else
propertyValue=" ";
}
objTemp.innerHTML=objTemp.innerHTML.replace(arrMatches[i],propertyValue);
}
else{
objTemp.innerHTML=objTemp.innerHTML.replace(arrMatches[i]," ");
}
}
}

4， 對於填充標誌的做法，剛開始的思路是，直接將模板行中的tr下的內容當成文本進行標誌的替換，但是顯示時沒有內容，於是只能逐個把td中的內容對標誌進行替換，發現顯示時是正確的，這個地方使我有點困惑。很明顯前者的做法效率更高，卻莫名其妙地顯不出來，只能退而求其次了。
函數調用說明
Code 複製代碼 代碼如下://見上面說明，這是添加行最基本的對外函數
function addInstanceRow(tableId,names,values,functionName)
//添加實體列表添加表格中，有幾個entity則添加幾行
//tableId 要動態添加行的Table的ID值
//entityList 對象數組 Array類型，
function addRowByEntityList(tableId,entityList)
//將一個實體添加到一行
function addRowByEntity(tableId,entity)
//刪除觸發事件控制項所在的行
function deleteThisRow(targetControl)
//刪除表格下的所有行
function deleteAllRow(tableId)

在IE6,7，firefox2,3測試沒問題，有問題留言或郵件badwps@163.com，謝謝

打包下載