gpt4 book ai didi

javascript - 使用 Javascript 将行插入到 FORM 内的 HTML 表中

转载 作者:行者123 更新时间:2023-11-28 08:00:01 25 4
gpt4 key购买 nike

我正在尝试使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com