- 时间：2021-10-19 19:46 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：JavaScript 动态添加表格行 使用模板、标记
对于复杂的操作情况，比如：添加一行之后，在这一行上还要进行相关的操作会显得有些吃力；本人比较喜欢表现层使用模板、标记填充数据的做法，于是自己做手做了个小组件，与大家一起分享。
组件运行截图：
[img]http://files.jb51.net/upload/20091024010101862.jpg[/img]
[img]http://files.jb51.net/upload/20091024010102375.jpg[/img]
设计思路：
在Table的thead中加入一行隐藏的行，当要添加一行时，复制一次隐藏的行，再将实例数据填充到这一行中相应的位置，填充完毕之后，再将这一行加到表格中去，整个操作完成。
模板：隐藏的行即相当于模板，当需要时复制一次模板。
标记：将模板行复制出来后，该如何填充数据？
网上比较多的组件的做法是，传递进来两个数组，一组是元素名称列表，一组是对应的值列表，然后对复制出来的行进行一个查找，发现其中的元素的名称在元素名称列表中的，让其value=对应的值。这样做可以满足一般的需求，因为Table里面一般放置文本框，将值放到其中即完成任务。对于复杂的情况，要求将数据填充到其它的位置，这种方法就力不从心了。
我的做法是将复制进来的模板行看做一段String，在这段String中查找标记，再将数据填充到相应的标记中去，这样的话，无论你哪个地方要填充数据，只要放一个标记就可以了，比上面的做法要灵活很多。
代码实现（关键点讲解）
我定义的标志为${属性}，传递过去的数据为一个entity，当在String中发现${city}，则表示将entity.city的内容替换${city}，当entity.city为NULL时，用 替换${city}（ 网页中的空格）。
动态添加行方法
badwps@163.com，谢谢
[url=http://xiazai.jb51.net/200910/yuanma/js_table.rar]打包下载[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
