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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
Vue的props父传子的示例代码
May 20 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
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
python自动zip压缩目录的方法
2015/06/28 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python中模块的__all__属性详解
2017/10/26 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
anaconda如何查看并管理python环境
2019/07/05 Python
使用python实现多维数据降维操作
2020/02/24 Python
python实现坦克大战
2020/04/24 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
会计毕业生自荐书
2014/06/12 职场文书
自我检讨书怎么写
2015/05/07 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
法制工作总结2015
2015/07/23 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python进行区间取值案例讲解
2021/08/02 Python