我正在尝试使用 javascript 将一行添加到位于表单中的表中。当代码位于 <form> 标记之外时，代码可以工作，但是一旦代码被 <form> 包围，添加的行将弹出几毫秒，并且然后消失。
所附代码在 Firefox 和 Mozilla 上进行了测试，结果相同。如果我删除 <form> 标签，代码就可以正常工作。关于为什么 <form> 标签导致重新加载并使添加的行消失的任何理想情况吗？
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
function addTableRow() {
var len = $('#vendorstbl tr').length
var table = document.getElementById("vendorstbl");
var row = table.insertRow(len);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "<select id='test"+len+"'><option name='test"+len+"'>Apple</option><option name='test"+len+"''>Sony</option></select>";
cell1.innerHTML = "<input type='text' size='25' id='product"+len+"' name='product"+len+"'' value='Enter Data'>";
}
</script>
<html>
<body>
<h3>Adding Row To Table Test:</h3>
<form>
<table class='add' id='vendorstbl'>
<tr><th>Vendor</th><th>Product</th></tr>
</table>
<button onclick='addTableRow()'>Add Row</button>
</form>
</body>
</html>
最佳答案
您是否考虑过使用 AngularJS 指令来完成此任务？ 带有一些格式的简单 ng-Repeat 只需几行代码即可完成此任务。
<table>
<tr ng-repeat="person in people" ng-class="rowClass(person)">
<td>{{ person.name }}</td>
</tr>
</table>
示例:http://jsfiddle.net/xEyJZ/
来源:https://docs.angularjs.org/api/ng/directive/ngRepeat
关于javascript - 使用 Javascript 将行插入到 FORM 内的 HTML 表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25551162/