Javascript table.removeRow（）在'；重置'；桌子

假设您有一个

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

---

出于某种原因，

remove（）

函数工作正常，但在使用了

reset（）

函数后，它就不再工作了。有人能告诉我这是为什么吗？

因为

var表

是活动的“”，它的属性在每次删除行时都会更新。部署

reset（）

函数

var表时，引用的子项少于还原的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');
}

希望有帮助：）
函数是否被调用？与事件委派有关：，（jQuery链接可能仍然有助于理解该原理）。或者只需谷歌“js事件授权”，看看哪个网站最适合你

to

document.getElementById（'myTable'）.deleteRow（rowID）调用reset后可能会工作严格来说，我实际上不确定是否应该调用此事件委派，但同样的原则也适用，因为当您删除表并再次添加它时，
var表
不会引用新表。
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');
}