HTMLテーブルで行が追加されたときの入力がリセットされる

Question

テーブルのドロップダウンにJQuery拡張機能Chosenを使用しています。 私はテーブルに行を追加するためにJavascriptを使用していますが、行を追加すると、最後の行の選択されたボックスだけが動作します。明確にするために、私は彼らが働かないと言うとき、私は彼らが開いたり閉じたりしないことを意味する（彼らが開いていれば）。ここで

は、テーブルのHTMLです：

 var numRows = 0; 
     function addRow() { 
      var table = document.getElementById("entrytbody"); 
      table.innerHTML += "<tr><td><select id='lot" + numRows + "' name='lot" + numRows + "' data-placeholder='Choose a Lot...' class='chosen-select' required><option value=''></option><option value='United States'>United States</option><option value='United States'>aawsd</option><option value='United States'>hhe</option><option value='United States'>Ugfdh</option><option value='United States'>ffy</option><option value='United States'>uhg</option></select></td><td><input name='timein" + numRows + "' type='time' required></td><td><input name='timeout" + numRows + "' type='time' required></td><td><input name='condition" + numRows + "' type='text' required></td><td><input name='plowed" + numRows + "' type='checkbox'></td><td><input name='shovelled" + numRows + "' type='checkbox'></td><td><input name='salted" + numRows + "' type='checkbox'><input name='saltamount" + numRows + "' type='number' style='width: 40px;' min=0></td><td><input name='people" + numRows + "' type='text' required></td></tr>" 
      $("#lot" + numRows).chosen(); 
      numRows++; 
     } 
     addRow(); 

私はそれがとてもページ上の2行が作るとき：ここでは

<table id="entrytable"> 
     <tbody id="entrytbody"> 
      <tr> 
       <th>Lot</th> 
       <th>Time In</th> 
       <th>Time Out</th> 
       <th>Lot Condition</th> 
       <th>Plowed</th> 
       <th>Shovelled</th> 
       <th>Salted</th> 
       <th>People Who Helped You</th> 
      </tr> 
     </tbody> 
    </table> 

は、私は、行を追加するために使用しているコードです。負荷、両方とも動作します。また、$("#lot" + numRows).chosen();コールが削除されると、前の行はまだ機能しません。

私はこの問題を数時間修正しようとしていましたが、解決策を探しても解決できませんでした。

Answer 1

もう一度試してみたところ、ドロップダウンメニューのChosenを削除し、新しい行を追加した後に通常のドロップダウンがリセットされました。簡単に言えば、私はJavaScriptを使って表の行を作成し、HTMLを表に直接挿入するのではなく、問題を修正しました。

それが働いていた私はなぜわからないんだけど、ここでは、編集されたコードです：私も

が起こった本当の問題に合うように、タグを編集し

var numRows = 0; 
    function addRow() { 
     var newRow = document.createElement('tr'); 
     newRow.innerHTML += "<td><select id='lot" + numRows + "' name='lot" + numRows + "' data-placeholder='Choose a Lot...' class='chosen-select' required><option value=''></option><option value='United States'>United States</option><option value='United States'>aawsd</option><option value='United States'>hhe</option><option value='United States'>Ugfdh</option><option value='United States'>ffy</option><option value='United States'>uhg</option></select></td><td><input name='timein" + numRows + "' type='time' required></td><td><input name='timeout" + numRows + "' type='time' required></td><td><input name='condition" + numRows + "' type='text' required></td><td><input name='plowed" + numRows + "' type='checkbox'></td><td><input name='shovelled" + numRows + "' type='checkbox'></td><td><input name='salted" + numRows + "' type='checkbox'><input name='saltamount" + numRows + "' type='number' style='width: 40px;' min=0></td><td><input name='people" + numRows + "' type='text' required></td>" 
     var table = document.getElementById("entrytbody"); 
     table.appendChild(newRow); 
     $("#lot" + numRows).chosen(); 
     numRows++; 
    } 
    addRow(); 

は、