JavaScript动态添加表格行（使用模板、标记）
引用：
http://www.soaspx.com/dotnet/ajax/javascript/javascript_20091023_1266.html

在客户端使用JavaScript动态添加表格行，先到网上找了相关的资料，发现有现成做好的组件，发现它只能够满足比较简单的要求，对于复杂的操作情况，比如：添加一行之后，在这一行上还要进行相关的操作会显得有些吃力；本人比较喜欢表现层使用模板、标记填充数据的做法，于是自己做手做了个小组件，与大家一起分享。

组件运行截图：





设计思路：
　　在Table的thead中加入一行隐藏的行，当要添加一行时，复制一次隐藏的行，再将实例数据填充到这一行中相应的位置，填充完毕之后，再将这一行加到表格中去，整个操作完成。
模板：隐藏的行即相当于模板，当需要时复制一次模板。
标记：将模板行复制出来后，该如何填充数据？
　　网上比较多的组件的做法是，传递进来两个数组，一组是元素名称列表，一组是对应的值列表，然后对复制出来的行进行一个查找，发现其中的元素的名称在元素名称列表中的，让其value=对应的值。这样做可以满足一般的需求，因为Table里面一般放置文本框，将值放到其中即完成任务。对于复杂的情况，要求将数据填充到其它的位置，这种方法就力不从心了。
　　我的做法是将复制进来的模板行看做一段String，在这段String中查找标记，再将数据填充到相应的标记中去，这样的话，无论你哪个地方要填充数据，只要放一个标记就可以了，比上面的做法要灵活很多。

代码实现（关键点讲解）
　　我定义的标志为${属性}，传递过去的数据为一个entity，当在String中发现${city}，则表示将entity.city的内容替换${city}，当entity.city为NULL时，用 替换${city}（ 网页中的空格）。  1动态添加行方法
2function addInstanceRow(tableId,names,values,functionName){
3    var tableObj=getTargetControl(tableId);
4    var tbodyOnlineEdit=getTableTbody(tableObj);
5    var theadOnlineEdit=tableObj.getElementsByTagName("THEAD")[0];
6    var elm=theadOnlineEdit.rows[theadOnlineEdit.rows.length-1].cloneNode(true);
7    elm.style.display="";
8    if(typeof(names)!="undefined"){
9        if(typeof(functionName)=="undefined") functionName="setObjValueByName";
10        if(typeof(values)!="undefined"&&values!=null){
11            var entity=ArrayToObj(names,values);
12            setInputValue(elm,entity,functionName);
13        }
14        else
15            setInputValue(elm,names,functionName);
16    }
17    tbodyOnlineEdit.appendChild(elm);
18}


1，获取Tbody，新添加的行要加到这里面去
　　var tbodyOnlineEdit=getTableTbody(tableObj);

2，获取THEAD，隐藏的模板在这里面，进行复制
　　var theadOnlineEdit=tableObj.getElementsByTagName("THEAD")[0];
　　var elm=theadOnlineEdit.rows[theadOnlineEdit.rows.length-1].cloneNode(true);
　　elm.style.display="";

3，去复制出来的行进行填充  1    if(typeof(names)!="undefined"){
2        if(typeof(functionName)=="undefined") functionName="setObjValueByName";
3        if(typeof(values)!="undefined"&&values!=null){
4            var entity=ArrayToObj(names,values);
5            setInputValue(elm,entity,functionName);
6        }
7        else
8            setInputValue(elm,names,functionName);
9    }


4，将填充好数据的行添加到表格中去
　　tbodyOnlineEdit.appendChild(elm);

难点、易出问题点说明

1， 获取Tbody，ie与firefox有区别，ie在默认的情况下是为table加上tbody的，而firefox则没有，所以要进行相应的判断
1//得到table中的tbody控件，注意兼容firefox
2function getTableTbody(tableObj){
3    var tbodyOnlineEdit=tableObj.getElementsByTagName("TBODY")[0];
4    if(typeof(tbodyOnlineEdit)=="undefined"||tbodyOnlineEdit==null){
5        tbodyOnlineEdit=document.createElement("tbody");
6        tableObj.appendChild(tbodyOnlineEdit);
7    }
8    return