Javascript 将表的克隆行追加到表的指定位置 函数CreateInterface（）{ document.getElementById（“欢迎”）.innerHTML= '' + '' + '' + ' '+ '用户标识：'+''+ '' + ''+ '' + '' + ''+'' + '' + ''; } 函数addRow（）{ var clnNode=document.getElementById（“tablerow”）.cloneNode（true）； document.getElementById（“数据表”）.appendChild（clnNode）； }

这是我的代码，我希望这个克隆节点插入按钮上方。事实上，此代码不起作用，即节点未添加到表中。请帮助我解决此问题。

您的问题是对多个元素使用相同的ID（

tableRow

）。id在html页面上必须是唯一的。如图所示

---

更好的解决方案是只有一行具有ID，每次克隆该行时，只需从克隆中删除ID。

您需要使用

insertBefore

并将

lastChild

作为第二个参数插入按钮上方的克隆行

function CreateInterface(){
    document.getElementById("welcome").innerHTML=
       '<form action="?" method="get" onsubmit=" return validate(this)">' +
       '<table id="dataTable" summary="" cellspacing="3" cellpadding="0" border="0">' +
       '<tr id="tablerow">' + '<td><INPUT type="checkbox" name="chk"/></td> '+
       '<th>Userid   : </th>' + '<td ><input name="userid" type="text" class="text" value="" maxlength="10" /></td>' +
       '</tr>' + '<tr><td colspan="2" align="center">'+
       '<INPUT type="button" value="Add" onclick="addRow()" />' +
       '<INPUT type="button" value="Delete" onclick="delRow()" />' +
       '<input type="submit" value="submit" />'+'</td></tr>' +
       '</table>' +
       '</form>';
}

function addRow(){

  var clnNode=document.getElementById("tablerow").cloneNode(true);  
  document.getElementById("dataTable").appendChild(clnNode);
}

下面是一个工作示例：

至于代码不工作，您不能从任何地方调用

CreateInterface

。将其设置为在

onLoad

上运行，一切正常。

不要使用

id=“tablerow”

，因为重复的id将导致格式错误的HTML。
将字符串中的

更改为仅

剧本

function addRow(){
    var table=document.getElementById("dataTable")
    var clnNode=document.getElementById("tablerow").cloneNode(true);  
    table.insertBefore(clnNode,table.lastChild);
}

---

演示：

尝试下面的代码。我刚刚调整了现有的addRow函数

function addRow() {
    var referenceNodes = document.getElementById("dataTable").getElementsByTagName("tr");
    //-2 because last row is button row
    var referenceNode = referenceNodes[referenceNodes.length - 2];
    var newNode = referenceNode.cloneNode(true);
    newNode.getElementsByTagName("input")[0].checked = false;
    newNode.getElementsByTagName("input")[1].value = "";
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

---

何时或如何调用这些函数？@TheVillageIdiot:不，我必须使用javascript:（@nayish:：CreateInterface（））第一次用按钮显示行时工作正常。现在，当我按下“添加添加行”按钮时，代码中没有显示其他问题，当我在输入框中写入内容并单击“添加行”时，添加行，但数据与其中写入的数据相同…我需要一个没有任何内容的空行输入…完成我添加了两行var clnAttr=clnNode.getElementsByTagName（“输入”）；clnAttr[1].value=''；它起作用了，让mw知道是否还有其他干净的方法！！！！thxi已经做了几乎相同的工作。不要忘记复选框这对我起作用了-我做的唯一稍微不同的事情是，我在克隆ID属性后也删除了它，以确保我在使用以下命令后立即在页面上只有一个ID属性r cloneNode（true）语句。--clnNode.removeAttribute（“id”）--

function addRow(){

  var clnNode=document.getElementById("tablerow").cloneNode(true);  
  tableObj = document.getElementById("dataTable");
  tbodyObj = document.getElementById("dataTable").getElementsByTagName('tbody')[0]
  tableObj.insertBefore(clnNode, tbodyObj)
}