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

Я предполагаю, что вы пытаетесь избежать нажатия кнопки в первой строке, но теперь нужно ее там, потому что вы думаете, что для ее получения в последующих строках вы должны иметь ее в строке, клонирование. Если вместо этого вы просто вставляете новый HTML-код для ввода и удаления кнопок ввода в методе addRow, вы можете полностью избежать клонирования, и не имеет значения, что содержит исходная строка.

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)"/> 

EVERYTIME функция 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); 
};