Javascript DOM - ajouter un élément de formulaire à appendChild?

Question

J'ai deux fonctions pour ajouter et supprimer des lignes de tableau contenant un élément de saisie de formulaire. Les deux fonctionnent bien, mais j'ai un problème en ce que je dois afficher une entrée de bouton Supprimer uniquement sur les lignes de tableau créées ultérieurement. Mes deux fonctions sont les suivantes:

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

et le contenu HTML est:

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

Je ne suis en aucun cas un expert en Javascript, mais plutôt un débutant, et j'ai donc du mal à trouver une solution.

Answer 1

Je suppose que vous essayez d'éviter d'avoir le bouton Supprimer dans la première ligne, mais que vous en avez besoin maintenant, car vous pensez que pour l'obtenir dans les lignes suivantes, vous devez l'avoir dans la ligne que vous clonez. . Si, au lieu de cela, vous insérez simplement un nouveau code HTML pour les entrées de boutons de téléchargement et de suppression dans la méthode addRow, vous pouvez éviter complètement le clonage et le contenu de votre ligne d'origine n'a aucune importance.

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

Ceci utilise toujours la première ligne en tant que modèle, mais vous pouvez supprimer le bouton à mesure qu'il est ajouté en ajoutant au texte existant.

Answer 2

Si vous devez créer cet élément

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

chaque fois que la fonction addRow est appelée, vous pouvez simplement le faire dans 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);
};