我正在尝试在单击按钮时添加新行。在我的新行中,我尝试添加一个文本框和一个下拉列表。我不知道我做错了什么?谁能帮我解决这个问题。提前致谢。
HTML
<table>
<tr>
<td><input type="text" name="data1" value="TempData" /></td>
<td><button type="button" onClick ="addRow(this)">Add</button></td>
</tr>
</table>
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);
var element2 = document.createElement("input");
element2.type = "select";
var option1 = document.createElement("option");
option1.innerHTML = "Option1";
option1.value = "1";
element2.add(option1, null);
var option2 = document.createElement("option");
option2.innerHTML = "Option2";
option2.value = "2";
element2.add(option2, null);
cell3.appendChild(element2);
}
JSFiddlehttp://jsfiddle.net/wAyhm/2/ http://jsfiddle.net/wAyhm/2/
使用 jQuery 尝试一下。但如果你想用 javascript 回答,那就跳过我的回答。
function AddRow() {
$('#tblTest').append(
'<tr><td>' +
'<input type="text" />' +
'<select><option value="1">Option 1</option>' +
'<option value="2">Option 2</option>' +
'<option value="3">Option 3</option></select>' +
'</td></tr>');
}
}
<table id="tblTest">
<tr>
<td>
<input type="text" name="data1" value="TempData" />
</td>
<td>
<input type="button" value="Add" onclick="AddRow()" />
</td>
</tr>
</table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)