javaScript中table表任意复制一行怎么实现JS

Question

如题所述

Answer 1

table表任意复制一行的关键是复制哪行，插入到什么位置，如何插入。
第 一个问题复制哪行，通常是点击某一行以确定复制的当前行，核心代码如下：
var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3)
targ = targ.parentNode
if(targ.tagName=="TD")
第 二个问题插入位置，通常是点击行的下面
pos = targ.parentNode.rowIndex+1
也有可能在表头首行pos =0
再就是表尾"beforeEnd"
第三个问题如何插入,先复制当前行：
var con = targ.parentNode.cloneNode(true);
再进行插入，可以是insertRow，也可以是insertAdjacentElement：
var x=document.getElementById('myTable').insertRow(pos)；
document.getElementById('myTable').insertAdjacentElement("beforeEnd",con);
复制之后可对复制行里的内容进行修改调整：
var y=x.insertCell(0).innerHTML=document.getElementById("cell1").value
也可进行删除指定行：
document.getElementById('myTable').removeChild(Obj.parentNode.rows[i]);

Answer 2

在js中用克隆(clone)的方法动态添加表格(table)行(tr):
用javascript的克隆方法添加表格的行要比用innerHTML方法代码简洁的多,主要使用Obj.cloneNode(true);方法进行克隆.
看下面的代码:

 <select onchange="add_row(parseInt(this.options[this.selectedIndex].text,10),document.getElementById(’cloneTR’))">
<option selected>0000</option>
<option>1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
<option>5555</option>
</select>
<table id="hiddentbl">
<tr id="cloneTR" style="display:none">
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
</table>
<script type="text/javascript">
function add_row(rowNum,Obj){ 
for(var i=1;i<Obj.parentNode.rows.length;i++){
Obj.parentNode.removeChild(Obj.parentNode.rows[i]);
i--;
}
for(var i=0;i<rowNum;i++){
var con = Obj.cloneNode(true); 
con.removeAttribute("style")
Obj.parentNode.insertAdjacentElement("beforeEnd",con); 
}
} 
</script>

‍

本回答被提问者和网友采纳

Answer 3

你这个任意复制一行，是点击某一行中的一个按钮，然后复制当前行？

复制的当前行，是插入到行集合的末尾，还是当前行的下面？