JavaScriptDOM-将表单元素添加到新创建的appendChild？

我有两个函数来添加和删除包含表单输入元素的表行。它们都工作得很好，但我有一个问题，我只需要在随后创建的表行上显示Remove按钮输入。我的两项职能如下：

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

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>

上传文件

---

我绝不是Javascript专家，更像是新手，所以我正在努力想出一个解决方案。

我假设您试图避免在第一行中使用“删除”按钮，但现在需要它，因为您认为要在后续行中使用它，您需要在克隆的行中使用它。相反，如果您只是在addRow方法中为upload和delete按钮输入插入新的HTML，则可以完全避免克隆，而不管原始行包含什么内容

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

函数addRow（表\u id）{
var table=document.getElementById（表id）；
var row=table.insertRow（table.rows.length）；
变量单元格=行插入单元格（0）；
var template=table.rows[0]。单元格[0]。innerHTML；
cell.innerHTML=模板+“”
}

---

这仍然使用第一行作为模板，但您可以在添加按钮时将其删除，方法是将其附加到现有文本中。

如果需要创建此元素

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

---

我也会这么做，但我太习惯jQuery了，以至于忘记了input.onclick分配处理程序的方式是否完全跨浏览器兼容。

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