JavaScript 动态添加表格行 使用模板、标记


Posted in Javascript onOctober 24, 2009

对于复杂的操作情况,比如:添加一行之后,在这一行上还要进行相关的操作会显得有些吃力;本人比较喜欢表现层使用模板、标记填充数据的做法,于是自己做手做了个小组件,与大家一起分享。

组件运行截图:

JavaScript 动态添加表格行 使用模板、标记
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, 进行标志的填充时,使用正则表达式进行标记的查找,找到标记后到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,谢谢

打包下载

Javascript 相关文章推荐
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
vue实例的选项总结
Jun 09 Javascript
javascript Keycode对照表
Oct 24 #Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 #Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 #Javascript
js文件中调用js的实现方法小结
Oct 23 #Javascript
struts2 jquery 打造无限层次的树
Oct 23 #Javascript
jquery 插件开发方法小结
Oct 23 #Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
javascript引导程序
2008/10/26 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python的Flask框架的简介和安装方法
2015/11/13 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python计算日期之间的放假日期
2018/06/05 Python
python实现大文件分割与合并
2019/07/22 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Django实现文件上传和下载功能
2019/10/06 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
民族团结先进个人材料
2014/02/05 职场文书
招股说明书范本
2014/05/06 职场文书
被告代理词范文
2015/05/25 职场文书
2016年学校招生广告语
2016/01/28 职场文书