جافا سكريبت 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);
}

وومحتوى أتش تي أم أل هو:

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

وأنا بأي حال من الأحوال خبير جافا سكريبت - أكثر من مبتدئ - لذلك أنا تكافح من أجل التوصل إلى حل

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

وفي كل مرة يتم استدعاء الدالة 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);
};