HTML-Tabelle setzt Eingaben zurück, wenn Zeile hinzugefügt wird

Question

Ich verwende die JQuery-Erweiterung, die für ein Dropdown in einer Tabelle ausgewählt wird. Ich verwende Javascript, um Zeilen zur Tabelle hinzuzufügen, aber wenn ich eine Zeile hinzufüge, ist das gewählte Feld in der letzten Zeile das einzige, das funktioniert. Um zu verdeutlichen, wenn ich sage, dass sie nicht funktionieren, meine ich, dass sie nicht öffnen oder schließen (wenn sie offen sind). Hier

ist der HTML-Code der Tabelle:

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

Hier ist der Code, den ich eine Zeile hinzuzufügen bin mit:

 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(); 

Wenn ich es so machen, gibt es zwei Reihen auf Seite laden, beide arbeiten. Auch wenn der Aufruf $("#lot" + numRows).chosen(); entfernt wird, funktionieren die vorherigen Zeilen immer noch nicht.

Ich habe versucht, dieses Problem für ein paar Stunden zu beheben, und habe auch nach einer Lösung gesucht und kann es immer noch nicht beheben.

Answer 1

Nachdem ich ein paar Stunden lang versucht hatte, gab ich den ausgewählten Aspekt des Dropdown-Menüs auf und entfernte das normale Dropdown-Menü nach dem Hinzufügen einer neuen Zeile. Lange Rede, kurzer Sinn, ich habe das Problem behoben, indem ich eine Tabellenzeile über Javascript erstellt habe und den HTML-Code in diesen eingefügt habe, anstatt direkt auf den Tisch.

Ich bin mir nicht sicher, warum es funktioniert, aber hier ist die bearbeitete Code:

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(); 

Ich redigierte auch die Tags, das eigentliche Problem zu passen, die geschah