JavaScript使用模板和标签动态添加表格行

对于复杂的操作情况，比如增加一行后，对这一行进行相关操作会有点困难；我更喜欢表示层使用模板和标签填充数据的方式，所以我自己做了一个小组件，分享给大家。组件操作截图：

设计思想：在表格的标题中添加一个隐藏行。当您想要添加一行时，复制隐藏行一次，然后在该行的相应位置填充实例数据。填充后，将该行添加到表中，整个操作完成。模板：隐藏线相当于模板，必要时模板复制一次。标记：复制模板行后如何填写数据？互联网上很多组件的方式是传入两个数组，一个是元素名称列表，一个是对应值列表。然后，查找复制的行，发现元素的名称在元素名称列表中，这样它们的值就等于相应的值。这可以满足一般要求，因为文本框通常放在表中，任务是通过在其中放入值来完成的。对于复杂的情况，需要在其他位置填充数据，所以这种方法是不够的。我的方法是将复制的模板行视为一个String，在这个String中查找标记，然后将数据填充到相应的标记中。这样，无论你想在哪里填充数据，你只需要放一个标签，比上面的方法灵活多了。代码实现(要点说明)我定义的标志是$ {attribute}，传递的数据是一个实体。当在String中找到${city}时，表示将entity.city的内容替换为${city}，当entity.city为NULL时，替换为${city}(网页中的空格)。动态添加行的方法复制代码代码如下：函数添加行(表id、名称、值、函数名){var table obj=gettargetcontrol(表id)；var tbodylonline edit=getTableTbody(tableObj)；var ThEadonLineEdIt=TableObj . GetElementsBytagname(' THEAD ')[0]；var elm=ThEadonlineedit . rows[ThEadonlineedit . rows . length-1]。克隆代码(真)；elm . style . display=' '；if(type of(name)！=' undefined '){ if(type of(function name)=' undefined ')function name=' setbjvaluebyname '；if(typeof(values)！='undefined '值！=null){ var entity=Arraytobj(名称、值)；setInputValue(elm，实体，函数名)；} else setInputValue(elm，Name，function name)；} tbodyonlineedit . appendchild(elm)；}复制的代码如下： if(type of(name)！=' undefined '){ if(type of(function name)=' undefined ')function name=' setbjvaluebyname '；if(typeof(values)！='undefined '值！=null){ var entity=Arraytobj(名称、值)；setInputValue(elm，实体，函数名)；} else setInputValue(elm，Name，function name)；} 4、将填充有数据的行添加到表中以进行tbodyonlineedit。appendchild(榆树)；难点、易题讲解1。要获取Tbody，ie不同于firefox，ie默认会将tbody添加到table中，而firefox不会，所以做相应的判断，复制代码如下： //，获取table中的tbody控件。注意与Firefox函数gettable tbody(table obj){ var tbodonline edit=table obj . getelementsbytagname(' tbody ')[0]的兼容性；if(type of(tbodylonline edit)=' undefined ' | | tbodylonline edit==null){ tbodylonline edit=document . create element(' t body ')；tableobj . appendchild(tbodylonline edit)；}返回tbodyOnlineEdit} 2、填充时实现了两种情况，一种是根据元素使用名称，另一种是根据标记填充Code，复制代码如下： //动态添加表行。//函数名为“setObjValueByName”作为基础元素名。//需要名称作为元素名称。该值是相应的值。////函数名为“”来填充标记。//names是一个对象，值为null。函数additionrow (tableid、名称、值、函数名)3。填充标记时，使用正则表达式来查找标记。找到标记后，从实体中获取相应的属性值。获取属性值后，替换字符串中的空格，否则显示会有问题。当属性值为空时，替换标记符号。代码在下面的函数中。

密码复制代码代码如下： //根据标志设置添加值函数setbjvaluebyflag(obj，entity){ var objTemp=obj。父节点；var arr匹配=objtemp。innerhtml。匹配(/\ $ { w }/g)；if(类型(arr匹配)=' undefined ' | | arr匹配==null | |类型(arr匹配。长度)=' undefined ' | | arr匹配。长度==null)返回；var tempValue=var property value=for(var I=0；iarrmatches . lengthi){ tempValue=arrMatches[I].替换(/\ $ { | }/g ' ')；属性值=getEntityPropertyValue(实体，TempValue)；if(propertyValue！=null){ if(类型为(property value)=' string '){ if(property value！=' ')property value=property value。替换(/\ s/g ' ')；else propertyValue=} objtemp。innerhtml=objtemp。innerhtml。替换(arr匹配[I]，属性值)；} else { objtemp。innerhtml=objtemp。innerhtml。替换(arrMatches[I]，' ')；} } } 4, 对于填充标志的做法，刚开始的思路是，直接将模板行中的tr下的内容当成文本进行标志的替换，但是显示时没有内容，于是只能逐个把任务描述中的内容对标志进行替换，发现显示时是正确的，这个地方使我有点困惑。很明显前者的做法效率更高，却莫名其妙地显不出来，只能退而求其次了。函数调用说明密码复制代码代码如下： //见上面说明，这是添加行最基本的对外函数函数添加实例显示(tableId，名称，值，functionName) //添加实体列表添加表格中，有几个实体则添加几行//tableId要动态添加行的桌子的身份值//实体列表对象数组排列类型，函数addRowByEntityList(tableId，entityList) //将一个实体添加到一行函数addRowByEntity(tableId，实体)//删除触发事件控件所在的行函数删除此行(目标控件)//删除表格下的所有行函数删除所有行（表标识)在IE6，7，firefox2，3测试没问题，有问题留言或邮件[emailprotected]，谢谢打包下载