Javascript DOM - 將表單元素添加到新創建的appendChild中？

Question

我有兩個函數來添加和刪除包含表單輸入元素的錶行。他們都工作得很好，但我有一個問題，我需要顯示一個刪除按鈕輸入只在隨後創建的錶行。我的兩個功能是爲如下：

function addRow(table_id){ 
var clone; 
var rows=document.getElementById(table_id).getElementsByTagName('tr'); 
var index=rows.length; 
var tbo=document.getElementById(table_id).getElementsByTagName('tbody')[0]; 
clone=rows[index-1].cloneNode(true); 
tbo.appendChild(clone); 
} 

function delRow(table_id,button){ 
var row = button.parentNode.parentNode; 
var tbo = document.getElementById(table_id).getElementsByTagName('tbody')[0]; 
tbo.removeChild(row); 
} 

和HTML內容：

<form> 
<table id="mytab"> 
<tr> 
<td>Upload File <input type="file" name="uploadfile[]" onchange="addRow('mytab')" /> <input name="del_row" type="button" value="Remove Row" onclick="delRow('mytab',this)"/></td> 
</tr> 
</table> 
</form> 

我絕不是一個JavaScript專家 - 更多的新手 - 所以我掙扎上來用解決方案。

Answer 1

我假設您正試圖避免在第一行中有刪除按鈕，但現在需要它，因爲您認爲要在後續行中獲取它，您需要將它放在所在的行中克隆。相反，如果您只需在addRow方法中爲上傳和刪除按鈕輸入插入新的HTML，則可以完全避免克隆，並且不會影響原始行包含的內容。

function addRow(table_id){ 
    var table = document.getElementById(table_id); 
    var row = table.insertRow(table.rows.length); 
    var cell = row.insertCell(0); 
    var template = table.rows[0].cells[0].innerHTML; 
    cell.innerHTML = template + '<input type="button" value="Remove Row"' 
       + ' onclick="delRow(\'' + table_id + '\',this);" />' 
} 

這仍然使用第一行作爲模板，但你可以從它，因爲它是通過追加到現有文本中添加刪除按鈕。

Answer 2

如果你需要創建這個元素

<input name="del_row" type="button" value="Remove Row" onclick="delRow('mytab',this)"/> 

每次的addRow函數被調用，你可以做這裏面addRow（）;

var input = document.createElement("input"); 
input.setAttribute("name", "del_row"); 
input.setAttribute("type", "button"); 
input.setAttribute("value", "Remove Row"); 
input.onclick = function() { 
    delRow("+table_id+", this); 
};