快捷導(dǎo)航

JavaScript 動(dòng)態(tài)添加表格行使用模板、標(biāo)記

更新時(shí)間：2009年10月24日 01:01:03 作者：

在客戶端使用JavaScript動(dòng)態(tài)添加表格行，先到網(wǎng)上找了相關(guān)的資料，發(fā)現(xiàn)有現(xiàn)成做好的組件，發(fā)現(xiàn)它只能夠滿足比較簡(jiǎn)單的要求。

對(duì)于復(fù)雜的操作情況，比如：添加一行之后，在這一行上還要進(jìn)行相關(guān)的操作會(huì)顯得有些吃力；本人比較喜歡表現(xiàn)層使用模板、標(biāo)記填充數(shù)據(jù)的做法，于是自己做手做了個(gè)小組件，與大家一起分享。

組件運(yùn)行截圖：

設(shè)計(jì)思路：
　　在Table的thead中加入一行隱藏的行，當(dāng)要添加一行時(shí)，復(fù)制一次隱藏的行，再將實(shí)例數(shù)據(jù)填充到這一行中相應(yīng)的位置，填充完畢之后，再將這一行加到表格中去，整個(gè)操作完成。
模板：隱藏的行即相當(dāng)于模板，當(dāng)需要時(shí)復(fù)制一次模板。
標(biāo)記：將模板行復(fù)制出來(lái)后，該如何填充數(shù)據(jù)？
　　網(wǎng)上比較多的組件的做法是，傳遞進(jìn)來(lái)兩個(gè)數(shù)組，一組是元素名稱列表，一組是對(duì)應(yīng)的值列表，然后對(duì)復(fù)制出來(lái)的行進(jìn)行一個(gè)查找，發(fā)現(xiàn)其中的元素的名稱在元素名稱列表中的，讓其value=對(duì)應(yīng)的值。這樣做可以滿足一般的需求，因?yàn)門able里面一般放置文本框，將值放到其中即完成任務(wù)。對(duì)于復(fù)雜的情況，要求將數(shù)據(jù)填充到其它的位置，這種方法就力不從心了。
　　我的做法是將復(fù)制進(jìn)來(lái)的模板行看做一段String，在這段String中查找標(biāo)記，再將數(shù)據(jù)填充到相應(yīng)的標(biāo)記中去，這樣的話，無(wú)論你哪個(gè)地方要填充數(shù)據(jù)，只要放一個(gè)標(biāo)記就可以了，比上面的做法要靈活很多。

代碼實(shí)現(xiàn)（關(guān)鍵點(diǎn)講解）
　　我定義的標(biāo)志為${屬性}，傳遞過(guò)去的數(shù)據(jù)為一個(gè)entity，當(dāng)在String中發(fā)現(xiàn)${city}，則表示將entity.city的內(nèi)容替換${city}，當(dāng)entity.city為NULL時(shí)，用 替換${city}（ 網(wǎng)頁(yè)中的空格）。

動(dòng)態(tài)添加行方法

復(fù)制代碼代碼如下:

 
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); 
} 

復(fù)制代碼代碼如下:

 
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，將填充好數(shù)據(jù)的行添加到表格中去
　　tbodyOnlineEdit.appendChild(elm);

難點(diǎn)、易出問(wèn)題點(diǎn)說(shuō)明

1，獲取Tbody，ie與firefox有區(qū)別，ie在默認(rèn)的情況下是為table加上tbody的，而firefox則沒(méi)有，所以要進(jìn)行相應(yīng)的判斷

復(fù)制代碼代碼如下:

 
//得到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，進(jìn)行填充時(shí)，實(shí)現(xiàn)了兩種情況，一種用根據(jù)元素的name,別一種則是根據(jù)標(biāo)記填充
Code

復(fù)制代碼代碼如下:

 
// 動(dòng)態(tài)添加表格行 
// functionname為“setObjValueByName”為根據(jù)元素name， 
//要求names為元素名稱，value為相對(duì)應(yīng)的值 
// 
//functionname為“”為標(biāo)記填充 
//要求names為一個(gè)對(duì)象，value為null 
function addInstanceRow(tableId,names,values,functionName) 

3，進(jìn)行標(biāo)志的填充時(shí)，使用正則表達(dá)式進(jìn)行標(biāo)記的查找，找到標(biāo)記后到entity中取相應(yīng)的屬性的值，取出屬性的值之后，要用 替換字符串中的空格，不然顯示時(shí)會(huì)有問(wèn)題，當(dāng)屬性值為空時(shí)用 替換標(biāo)記符號(hào)，代碼在以下函數(shù)中。
Code

復(fù)制代碼代碼如下:

 
//根據(jù)標(biāo)志設(shè)置添加值 
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,"&nbsp;"); 
else 
propertyValue="&nbsp;"; 
} 
objTemp.innerHTML=objTemp.innerHTML.replace(arrMatches[i],propertyValue); 
} 
else{ 
objTemp.innerHTML=objTemp.innerHTML.replace(arrMatches[i],"&nbsp;"); 
} 
} 
} 

4，對(duì)于填充標(biāo)志的做法，剛開(kāi)始的思路是，直接將模板行中的tr下的內(nèi)容當(dāng)成文本進(jìn)行標(biāo)志的替換，但是顯示時(shí)沒(méi)有內(nèi)容，于是只能逐個(gè)把td中的內(nèi)容對(duì)標(biāo)志進(jìn)行替換，發(fā)現(xiàn)顯示時(shí)是正確的，這個(gè)地方使我有點(diǎn)困惑。很明顯前者的做法效率更高，卻莫名其妙地顯不出來(lái)，只能退而求其次了。
函數(shù)調(diào)用說(shuō)明
Code

復(fù)制代碼代碼如下:

 
//見(jiàn)上面說(shuō)明，這是添加行最基本的對(duì)外函數(shù) 
function addInstanceRow(tableId,names,values,functionName) 
//添加實(shí)體列表添加表格中，有幾個(gè)entity則添加幾行 
//tableId 要?jiǎng)討B(tài)添加行的Table的ID值 
//entityList 對(duì)象數(shù)組 Array類型， 
function addRowByEntityList(tableId,entityList) 
//將一個(gè)實(shí)體添加到一行 
function addRowByEntity(tableId,entity) 
//刪除觸發(fā)事件控件所在的行 
function deleteThisRow(targetControl) 
//刪除表格下的所有行 
function deleteAllRow(tableId) 