Javascript DOM: ¿agregar elemento de formulario a appendChild recién creado?

Question

Tengo dos funciones para agregar y eliminar filas de tabla que contienen un elemento de entrada de formulario. Ambos funcionan bien, pero tengo un problema porque necesito mostrar una entrada del botón Eliminar solo en las filas de la tabla creadas posteriormente. Mis dos funciones son las siguientes:

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

y el contenido html es:

<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>

De ninguna manera soy un experto en Javascript, más un novato, así que estoy luchando por encontrar una solución.

Answer 1

Supongo que está intentando evitar tener el botón Eliminar en la primera fila, pero lo necesita allí ahora porque cree que para obtenerlo en las filas posteriores, debe tenerlo en la fila que está clonando . Si, en cambio, simplemente inserta un nuevo HTML para las entradas del botón cargar y eliminar en el método addRow, puede evitar el clon por completo y no importará lo que contenga su fila original.

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

Esto todavía usa la primera fila como plantilla, pero puede quitar el botón de ella a medida que se agrega agregando al texto existente.

Answer 2

Si necesita crear este elemento

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

cada vez que se llama a la función addRow, puede hacerlo dentro de 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);
};