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

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

這是我的代碼，我希望將此克隆節點插入到按鈕上方。實際上，這段代碼不起作用，即節點沒有被添加到表中。請幫我解決這個問題將表的克隆行附加到表上的指定位置

來源

2011-08-18 abhinav singh

何時或如何調用這些函數？ – Nayish

你不能使用jQuery嗎？ – TheVillageIdiot

@TheVillageIdiot：不，我必須使用javascript :( –

不要使用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/

來源

2011-08-18 07:32:47 naveen

謝謝納文，工作絕對好!!!!!! –

@downvoter：謹慎闡述？ – naveen

這段代碼中的另一個問題是，當我在輸入框中寫入內容並點擊ADD時，它添加了行，但是寫入了相同的數據....我需要一個沒有任何寫入Input的空行。 –

你的問題是你使用幾個元素相同的ID（tableRow）。一個id在html頁面上必須是唯一的。如here所示。

更好的解決方案是隻有一行帶有ID，並且每次克隆行時只需從克隆中刪除該ID。

來源

2011-08-18 07:16:00 Nayish

您需要使用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上運行，事情就會起作用。

來源

2011-08-18 07:25:18 TheVillageIdiot

+1變種相同的方法:) – naveen

嘗試下面的代碼。我剛剛調整了您現有的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) 
}

來源

2011-08-18 08:17:09 Bala

這對我有效 - 我做的唯一稍微不同的是，我也刪除了ID屬性後，我克隆它，以確保我只有在cloneNode（true）語句之後立即在頁面上使用以下內容。 - clnNode.removeAttribute（「id」）; - – madebyhippo

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

回答

相關問題