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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JS的数组迭代方法
Feb 05 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
深究AngularJS之ui-router详解
Jun 13 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
js实现石头剪刀布游戏
Oct 11 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python中str.join()简单用法示例
2018/03/20 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
python提取xml里面的链接源码详解
2019/10/15 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
机关门卫制度
2014/02/01 职场文书
收款授权委托书
2014/10/02 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年终个人工作总结
2014/11/07 职场文书
实习单位证明范例
2014/11/17 职场文书
售票员岗位职责
2015/02/15 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python