方法一:从别的table中引入
<html>
<body>
<table id=t1><tbody>
<tr><td>111</td><td>222</td></tr></tbody>
</table>
======================================
<table id=t2 width=0 height=0>
<tr id=tr1><td>333</td><td>444</td></tr>
</table>
<input type='button' value='add' onClick=change()>
</body>
</html>
<Script>
function change(){
var t1=document.getElementById('t1');
var t2=document.getElementById('t2');
var tr1=document.getElementById('tr1');
t1.rows[t1.rows.length - 1].parentNode.appendChild(tr1);
alert(tr1);
alert(t1.innerHTML);
alert(t2.innerHTML);
}
</Script>
请注意,这样处理时,第二个table中的行将会被移除。
方法二:拷贝某个table中的一行,清空该行的信息,并改动hidden的input的name,如name[1] 改为 name[2]
//insertRow new row
function() insertRow {
//copy last row in table
var objTR = table.rows[table.rows.length - 1].cloneNode(true);
//get the specific row number for remove
//var deleteRowNum = table.rows.length - 1;
//append a new row at the end of table
table.rows[table.rows.length - 1].parentNode.appendChild(objTR);
this.clearElement(table.rows[table.rows.length - 1], 'input');
this.clearElement(table.rows[table.rows.length - 1], 'select');
this.clearElement(table.rows[table.rows.length - 1], 'textarea');
for ( var i = 0; i < table.rows[table.rows.length - 1].cells.length; i++) {
var str = table.rows[table.rows.length - 1].cells[i].innerHTML;
str = str
.replace(/\[[0-9]*\]/g, '[' + (this.account + 1) + ']');
table.rows[table.rows.length - 1].cells[i].innerHTML = str;
}
this.account++;
document.getElementById('dirtyFlag').value='true';
//this.resetTableClass();
}
// this function if for clear all input ,textarea,select
this.clearElement = function(obj, tagName) {
var input = obj.getElementsByTagName(tagName);
if (input.length > 0) {
for ( var i = 0; i < input.length; i++) {
if (input[i].type == 'text') {
input[i].value = '';
} else if (tagName == 'select') {
input[i].options[0].selected = true;
} else if (tagName == 'textarea') {
input[i].value = '';
}
}
}
}
分享到:
相关推荐
javascript动态添加表格数据行 在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种...
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
NULL 博文链接:https://long316.iteye.com/blog/1393886
javascript 表格行列动态添加,在formbean定义这个属性为String[]
解决了要动态生成表格行的问题,效果很好。我的项目中就用到了这个效果。
用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...
本文给大家分享使用原生javascript实现动态向表格中添加数据的方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
JS自动添加,删除表格总结,及window窗体居中。内含源代码!!!!
javascript实现动态的添加表格功能
网页表格用js动态添加一行代码,javascript应用
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要填充的数据,一般是从数据库取数据,也...
表格部分代码如下: ”testTbl” border=1> ”tr1″> <td width=6%><input type=checkbox id=”box1″> ”b”>第一行 ”tr2″> <td width=6%><input type=checkbox id=”box2″> ”b”>第二行 ...
本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子。
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助