JavaScriptの値が変更されたときに、テーブルのテキスト入力が更新されない

Question

セルに入力要素が埋め込まれているテーブルがあります。 （これは進行中の作業ですので、idを空を無視してください、などが、私はそれを実行しているように私は、実際のコードを貼り付けてみたかった）：

<table class='table table-bordered table-hover table-condensed' id='esr_table'> 
    <thead> 
    <tr> 
     <th class='macd_action'>Action</th> 
     <th class='macd_action'>Hostname</th> 
     <th class='macd_action'>IP Address</th> 
     <th class='macd_action'>Model</th> 
     <th class='clickme tw15' id='add_row'> 
     <span class='<% entry.0 %>_span glyphicon glyphicon-plus'> 
     </span> 
     </th> 
    </tr> 
    </thead> 
    <tbody id="esr_table_body"> 
     <tr> 
      <td class='' id=''> 
       <select> 
        <option value='Add'>Add</option> 
        <option value='Decommision'>Decommision</option> 
        <option value='Change'>Change</option>       
       </select> 
      </td> 
      <td class='' id=''> 
       <input type='text' placeholder='hostname' id='host' name='host'></input> 
      </td> 
      <td class='' id=''> 
       <input type='text' placeholder='0.0.0.0' id='ipaddress' name='ipaddress'></input> 
      </td> 
      <td class='' id=''> 
       <input type='text' placeholder='model' id='model' name='model'></input> 
      </td> 
      <td class='clickme minus' id=''> 
       <span class='minus glyphicon glyphicon-minus'></span> 
      </td> 
     </tr> 
    </tbody> 
</table> 

私は別のソースからのデータをつかんで送信していますそれを処理するためにajax経由でサーバーに送信します。サーバーは、varアクションに格納された2次元配列としてデータを返します。私のAJAXの成功の機能は次のようになります。これは、一つの問題を除いて正常に動作します

success: function(dat){ 
    var actCount = actions.length; 
    var rowCount = $('#esr_table_body tr').length; 

    for(var i = 0; i < actCount - rowCount; i++) { 
     $('#esr_table > tbody:last-child').append(trow); 
    } 

    var tbl = document.getElementById('esr_table_body'); 
    for(var i = 0; i <= actCount; i++){ 
     var rw = tbl.rows[i]; 
     for(var j = 0; j < 4; j++){ 
      rw.cells[j].firstChild.value = actions[i][j]; 
     } 
    } 
} 

- テーブルの最初の行は空白のままです。動的に追加されたテーブルにデータが入力され、正しく表示されます。テーブルの2番目の行には返されたデータの2番目の行などがあります。返されるデータが正しいことを確認しました。最初の行が欠けているわけではありません。この行を「より小さいか等しい」に変更した場合：

for(var i = 0; i < actCount - rowCount; i++) { 

余分な行がテーブルに追加されます。私は、この行を変更した場合：[I + 1]に

var rw = tbl.rows[i]; 

を、ループは、行1の代わりに、行0に更新開始し、返されたデータの全てが表示されます。さらに、テーブルを2つの静的な行に変更すると、最初の2つの行は空白のまま残り、テーブルの3番目の行は3番目の行の返されたデータで更新されます。私が見ることができるのは、動的に生成された行に対して更新が行われているが、静的な行には作用していないか、値は更新されていますが、表示は更新されていないことを示しています。動的更新は、ページ上の静的HTMLと同一の文字列を挿入します。静的HTMLと文字列を分割ウィンドウに貼り付けて、HTMLが同一であることを確認するためにvimdiffを実行しました。私は複数のブラウザでこれを試して、同じ動作を参照してください。私は完全に困惑しており、数時間にわたるグーグルリングは、問題が何であるかについて私を賢く残していません。私はどんな援助にも感謝しています。

更新：私がこれを調べるほど、怪物になる。 jsfiddleに移動してボタンをクリックすると、インデックス0になるテーブルの最初の行が空白になります。セルには値は表示されません。しかし、あなたは、コンソールを開くと、あなたがこれを行うことができます：

var esrTable = document.getElementById("esr_table_body").children; 
undefined 
esrTable[0].cells[1].firstChild.value 
"Host1" 

だから、私は割り当てられた値を取得することができますが、それがページに表示されていませんか？私もできない。

Answer 1

tbody HTMLを空にして（そこにある単一の行を削除して）、スクリプトを最初に追加するように修正しました。

 
var trow = "..."; 

$('#esr_table > tbody:last-child').append(trow); 

function upd() { 
    ... 
} 

そうでないテーブルは明らかであっても、その最初の行は、インデックス0（行[0]は未定義である）、これによって判断でなければならない実現しない。

回だけ印刷さ

Uncaught TypeError: Cannot read property 'cells' of undefined

クリックあたり（4回ではなく）。 1就業から始まるサイクルについてあなたが言ったことも、これをサポートしています。

UPDATE

細胞でそう最初の子供が空白を含むテキスト・ノードになりますので、実際のソリューションは、よりコンパクトな行のHTMLコードを作っている：

<td class='' id=''><input type='text' placeholder='hostname' id='host' name='host'/></td> 
    <td class='' id=''><input type='text' placeholder='0.0.0.0' id='ipaddress' name='ipaddress'/></td> 
    <td class='' id=''><input type='text' placeholder='model' id='model' name='model'/></td> 
    <td class='clickme minus' id=''><span class='minus glyphicon glyphicon-minus'></span></td> 

...あなたのHTMLをきちんとしたものに整え、代わりにJavaScriptを使用してこれを修正することをお勧めする場合：

for (var i = 0; i < actCount; i++) { 
    var rw = tbl.rows[i]; 
    for (var j = 0; j < 4; j++) { 
     if(rw.cells[j].firstChild.nodeType == 3) { 
     //nodeType is 3 for text nodes -- SHOW NO MERCY TO THEM 
     rw.cells[j].removeChild(rw.cells[j].firstChild); 
     } 
     rw.cells[j].firstChild.value = actions[i][j]; 
    } 
    } 

rse、最初の行を修正するだけで、クリックごとにすべての行を修正するのではなく、実装と目標によって異なります。

注：実際には、定義されていない行は、0からactCount-1ではなく、0からactCountになるiサイクルによって実際に発生しました。