博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM中cloneNode的使用之旅
阅读量:7024 次
发布时间:2019-06-28

本文共 2027 字,大约阅读时间需要 6 分钟。

hot3.png

struts2中可以自动封装表单提交过来的参数
List
exSeasonOut = new ArrayList
();
            
但是页面中需要可以通过js动态添加行,实现代码如下
$("exSeason").on("click",addRow);/* copy the tr(id) and append to the table, change the id、name of the new tr at the same time */function addRow(id) { 	var tr = $(id);		if(!tr.index) {		tr.index = 0;	}	tr.index++;		var newTr = tr.cloneNode(true);	newTr.innerHTML = newTr.innerHTML.replace(/[\d]/g, tr.index);		tr.parentElement.appendChild(newTr);}
看一下这行代码的效果:
newTr.innerHTML = newTr.innerHTML.replace(/[\d]/g, tr.index);
23165938_PJhd.bmp
结果td的起始标签不见了,替换后只剩下td的结束标签,原因未知
23165938_nr0a.bmp
然后试着将td的innerHTML进行替换
newTr.childNodes[0].innerHTML = newTr.childNodes[0].innerHTML.replace(/[\d]/g, tr.index);
23165938_sCpP.bmp
调试一看,样式及一些自定义属性不见了
23165938_vnU0.bmp
23165938_Ou0x.bmp
没办法,只能找出所有input,改变其id、name了
var inputs = newTr.$T("input");for(var i=0;i
完美了?测试看看效果
23165938_d0He.bmp
点击最下面的时间选择控件,结果发现,其定位到了第一行中的tr上去了,newTr中元素绑定的事件都绑定到原始tr了,看来cloneNode(true)会拷贝元素在内存中的所有状态
23165938_pXME.bmp
还是老老实实的通过dom创建元素吧:
季节
 
 
/* copy the tr(id) and append to the table, change the id、name of the new tr at the same time */ function addRow(id) { var tr = $(id); if(!tr.index) { tr.index = 0; } tr.index++; var newTr = tr.cloneNode(true); //newTr.innerHTML = newTr.innerHTML.replace(/[\d]/g, tr.index); //newTr.childNodes[0].innerHTML = newTr.childNodes[0].innerHTML.replace(/[\d]/g, tr.index); var inputs = newTr.$T("input"); for(var i=0;i
23165939_X9zU.jpg
23165939_gifI.jpg
OK,搞定......

转载于:https://my.oschina.net/darkness/blog/510266

你可能感兴趣的文章
阿里云-安装tomcat
查看>>
Sprint总结和第八九十的读书笔记
查看>>
uva 10746 Crime Wave – The Sequel
查看>>
其他OJ 树型DP Transfer
查看>>
个人整理的数组splay板子,指针的写的太丑了就不放了。。
查看>>
Java数据类型
查看>>
python 字符编码与转码
查看>>
PetaPoco4.0的事务为什么不会回滚
查看>>
[考试]20151009
查看>>
JavaScript判断浏览器类型
查看>>
8.9心得
查看>>
Tyvj P1729 文艺平衡树 Splay
查看>>
java mysql驱动
查看>>
第十天
查看>>
2018年全国卷Ⅰ卷文科数学解析
查看>>
servlet3.0 注解开发 helloworld
查看>>
TP3.2 配置最新的阿里大于sdk
查看>>
长链剖分学习笔记
查看>>
linux之cut用法
查看>>
被辞退于年末
查看>>