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

您需要使用insertBefore并传递lastChild作为第二个参数，以便在按钮上方插入克隆的行。

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

以下是工作示例：http://jsfiddle.net/amantur/8KYum/10/

至于代码不起作用，你不是从任何地方调用CreateInterface。将其设置为在onLoad上运行，一切正常。

Answer 2

请勿使用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/

Answer 3

您的问题是您使用多个元素的相同ID（tableRow）。在html页面上，id必须是唯一的。如here中所示。

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

Answer 4

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

function addRow(){

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

将表的克隆行附加到表上的指定位置

4 个答案: