您好,我正在尝试在单击按钮时添加多个文本框。 我写了以下 HTML 代码。
<script type="text/javascript">
function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell3 = row.insertCell(1);
}
</script>
<table>
<tr>
<td><input type="text" name="data1" value="abc" /></td>
<td><button type="button" onClick ="addRow(this)">Add</button></td>
</tr>
</table>
我不知道该怎么做. 请告诉我如何做这些事情....提前谢谢你
将
JavaScript 代码包装在 head 部分。
代码演示
与 jQuery 相同的代码
演示
var txtbox = '<td><input type="text"/></td>';
function addRow(btn) {
$(btn).closest('tr').append(txtbox);
}
演示
var txtbox = '<tr><td><input type="text"/></td></td>';
function addRow(btn) {
$(btn).closest('table').append(txtbox);
}
引用
.closest()
.append()
添加下拉列表
您只需要在var txtbox
中添加下拉列表代码
演示
var txtbox = '<tr><td><select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select></td></td>';
function addRow(btn) {
$(btn).closest('table').append(txtbox);
}
试试这个样子...
var emails = document.getElementById('emails'),
add_link = document.createElement('a'),
template = emails.getElementsByTagName('div'),
current = template.length,
max = 20;
template = template[0];
submit1.onclick = function () {
var new_field = template.cloneNode(true);
current += 1;
new_field.innerHTML = new_field.innerHTML.replace(/1/g, current);
emails.appendChild(new_field);
if (current === max) {
add_link.onclick = null;
document.body.removeChild(add_link);
}
return false;
};
document.body.appendChild(add_link);
对于演示 http://jsfiddle.net/wQfLT/145/