table.removeRow（）はテーブルを 'リセット'しても機能しなくなりますか？

Question

はあなたが私はいくつかの理由のため、以下の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; 
} 

を持って

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

のHTMLテーブルがあるとし、remove()機能が正常に動作しますが、reset()機能を使用した後、それはもはや作品。誰が私にこの理由が教えてもらえますか？

Answer 1

var tableはライブ 'Element object'です。このプロパティは、行を削除するたびに更新されます。 reset()関数を展開するときまでに、var tableは、復元されたHTMLよりも小さい子を参照します。コンソールを開くと、後で "X"にバインドされた関数の使用時に索引付けエラーが表示されます。

あなたは:)