Javascript Javascript: aggiungi l'elemento del modulo all'appendChild appena creato?

Question

Ho due funzioni per aggiungere e rimuovere le righe della tabella che contengono un elemento di input del modulo. Entrambi funzionano bene, ma ho un problema in quanto devo mostrare un input del pulsante Rimuovi solo sulle righe della tabella create successivamente. Le mie due funzioni sono le seguenti:

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

e il contenuto 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>

Non sono affatto un esperto di Javascript - più che altro un novizio - quindi faccio fatica a trovare una soluzione.

Answer 1

Suppongo che tu stia cercando di evitare di avere il pulsante Rimuovi nella prima riga, ma ora ti serve lì perché pensi che per ottenerlo nelle righe successive, devi averlo nella riga che stai clonando . Se, invece, inserisci un nuovo codice HTML sia per gli input dei pulsanti di caricamento che di eliminazione nel metodo addRow, puoi evitare del tutto il clone e non importa ciò che contiene la tua riga originale.

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

Utilizza ancora la prima riga come modello, ma puoi rimuovere il pulsante da esso quando viene aggiunto aggiungendo al testo esistente.

Answer 2

Se devi creare questo elemento

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

ogni volta che viene chiamata la funzione addRow, puoi semplicemente farlo all'interno di 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);
};