Question

假设您有一个

的html表

<form id="myForm">
<table id="myTable">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>

    </tr>

    <tr>
        <td>Alpha</td>
        <td>Bravo</td>
        <td><a href="javascript:remove(1)">X</a></td>
    </tr>

    <tr>
        <td>Charlie</td>
        <td>Delta</td>
        <td><a href="javascript:remove(2)">X</a></td>
    </tr>

    <tr>
        <td>Echo</td>
        <td>Foxtrot</td>
        <td><a href="javascript:remove(3)">X</a></td>
    </tr>
</table>
</form>
<a href="javascript:reset()">Reset</a>

我有以下javascript

var table = document.getElementById('myTable');
var form = document.getElementById('myForm');
var formSave = form.innerHTML;

function remove(rowID)
{
    table.deleteRow(rowID);
}

function reset()
{
    form.innerHTML = formSave;
}

出于某种原因，remove()函数工作正常，但在使用reset()函数后，它不再有效。谁能告诉我为什么会这样？

Answer 1

由于var table是实时“Element object”，每次删除行时都会更新其属性。当您部署reset()函数var table时，引用的子项少于还原的HTML。打开控制台将显示在后续使用绑定到“X”的函数时出现索引错误。

您可以通过重新获取重置功能中的元素来解决此问题，如此......

var table = document.getElementById('myTable');
var form = document.getElementById('myForm');
var formSave = form.innerHTML;

function remove(rowID) {
    table.deleteRow(rowID);
}

function reset() {
    form.innerHTML = formSave;
    /* re-acquire 'new' (inserted) table */
    table = document.getElementById('myTable');
}

希望有所帮助：）

table.removeRow（）在'重置'表时停止工作？

1 个答案: