Question

我正在尝试使用javascript将表格添加到表格中。当代码在＆lt; 表单＆gt;之外时，代码可以正常工作标签，但一旦代码被＆lt; form ＆gt;包围，添加的行将弹出几毫秒然后消失。

附带的代码在Firefox和Mozilla上进行了测试，结果相同。如果我删除＆lt; 表单＆gt;标签，代码工作正常。任何理想的＆lt; 形式＆gt;标签是否导致重新加载并使添加的行消失？

<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>

Answer 1

您是否考虑过使用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在FORM中将行插入HTML表格

1 个答案: