`

JavaScript 动态 为表格添加 行

阅读更多
方法一:从别的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 = '';
}
}
}
}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics