Javascript DOM - add elemento de formulário para recém-criado appendChild?

Question

Eu tenho duas funções para adicionar e remover linhas da tabela que contêm um elemento de entrada de formulário. Ambos funcionam bem, mas eu tenho um problema em que eu preciso mostrar uma entrada botão Remover somente em linhas da tabela criados posteriormente. Minha função dois são como os seguintes:

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

eo conteúdo 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>

Eu sou de nenhuma maneira um perito do Javascript - mais de um novato - então eu estou lutando para chegar a uma solução

.

Answer 1

Estou assumindo que você está tentando evitar que o botão Remover na primeira fila, mas precisa dele lá agora, porque você acha que para obtê-lo em linhas subsequentes, você precisa tê-lo na linha que você está clonagem . Se, em vez disso, você simplesmente inserir novo HTML, tanto para o upload e entradas botão Delete no método addRow você pode evitar o clone inteiramente e não importa o que sua linha original contém.

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);" />'
}

Este ainda usa a primeira linha como o modelo, mas você pode remover o botão a partir dele como ele é adicionado, acrescentando ao texto existente.

Answer 2

Se você precisa criar este elemento

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

toda vez que a função addRow é chamado, você pode simplesmente fazer isso dentro 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);
};