JavaScript的DOM - 表单元素添加到新创建的appendChild?
-
20-08-2019 - |
题
我有两个功能来添加和删除包含一个形式输入元件表行。他们都工作得很好,但我有我需要为只在随后创建的表行的删除按钮输入一个问题。我的两个功能如如下:
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专家 - 更多新手的 - 所以我努力拿出一个解决方案。
解决方案
我假设你正试图避免在第一行中的删除按钮,但需要它有现在,因为你认为得到它的后续行,你需要有它,你是克隆行。相反,如果你只需要插入新的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);" />'
}
此仍使用第一行作为模板,但可以从它,因为它是通过附加到现有文本添加删除的按钮。
其他提示
如果你需要创建这个元素
<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);
};
不隶属于 StackOverflow