javascript - 将表格的克隆行附加到表格的指定位置

Question

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);
}

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

Answer 1

不要使用 id="tablerow"因为重复的 ID 会导致 HTML 格式错误。
更改 <tr id="tablerow"> 在你的字符串中只是 <tr>

脚本

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);
}

演示:http://jsfiddle.net/naveen/wbFMm/