Beibehaltung der Seitendaten beim erneuten Laden der Seite

Question

Ich habe eine HTML-Tabelle und füge Zeilen hinzu und entferne sie mit jQuery. Wenn ich zum Beispiel 10 Zeilen hinzufüge und dann die Seite neu lade, werden alle hinzugefügten Daten gelöscht.

Wie kann ich diese Daten behalten, nachdem die Seite neu geladen wurde?

Dies ist, was ich bisher:

function AddRow() { 
 
    $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>") 
 
} 
 
$('.print-table').on('click', '.removebtn', function() { 
 
    $(this).parent().parent().remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table print-table"> 
 
    <thead> 
 
    <tr class="danger"> 
 
     <th width="30">S#</th> 
 
     <th width="100">VOUCHER#</th> 
 
     <th width="80">ID</th> 
 
     <th>FULL NAME OF STUDENT</th> 
 
     <th width="80">PAYABLE</th> 
 
     <th width="80">PAID</th> 
 
     <th width="100">PAID ON</th> 
 
     <th width="110">CLOSE-BAL</th> 
 
     <th width="80">ACTION</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>999</td> 
 
     <td> 
 
     <input type="text" name="id" disabled="disabled"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="id" disabled="disabled"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="id" autofocus> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="id" disabled="disabled"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="id"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="id" onfocusout="AddRow()"> 
 
     </td> 
 
     <td>00</td> 
 
     <td> 
 
     <button class="btn btn-primary btn-xs removebtn">Delete</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button class="btn btn-primary xs" onclick="AddRow()">Add Row</button>

Answer 1

Legen Sie die Daten auf localstorage fest und rufen Sie sie später ab.

localstorage.setItem("data", "<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>"); 

---

<script type="text/javascript"> 
    var olddata = localstorage.getItem("data"); 

    $('.print-table').append(data); 

     function AddRow() { 
      $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>") 

    localstorage.setItem("data", localstorage.getItem("data")+"<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>"); 

     } 
     $('.print-table').on('click','.removebtn', function() { 
      $(this).parent().parent().remove(); 
     }); 
    </script> 

Answer 2

Sie müssen diese neu erstellten Zeilen somehwere speichern und sie in Ihren dom laden, nachdem Sie Ihre Website (oder während Lasten geladen).

Die Zeilen, die Sie über JavaScript hinzufügen, sind nur vorübergehend und daher nicht in Ihrer Datei gespeichert, da Sie nur das Dom bearbeiten. Um etwas genauer zu sein: Die Änderungen gelten nur für Sie, in diesem Browser, den Sie gerade benutzen.

Um es dauerhaft (und damit auch für jeden sichtbar) zu machen, müssen Sie die erstellten Zeilen wie oben erwähnt speichern.

Zum Beispiel könnten Sie diese Zeilen in einer .txt -Datei oder einer Datenbank speichern, hängt irgendwie davon ab, was Sie damit tun werden. Sie können diese Werte serialisieren und nach dem Deserialisieren laden und an Ihre fest codierte Tabelle anhängen.

Answer 3

Sie benötigen Speicher, um Ihre Daten zu speichern. Wie dataBase localStorage und sessionStorage. In Ihrem Problem reicht localStorage.

wenn die html laden, müssen Sie beurteilen, die localStorage hat value.if hat Wert Sie nur füllen Sie die Tabelle mit Javascript (Tabale erstellen und $ ('. Print-Tabelle') verwenden. Html());

Wenn Sie Zeilen hinzufügen und entfernen, müssen Sie die Daten speichern.

zB:

speichern die Daten

var data;//your data 
localStorage.data = data;//store the data; 

get Daten;

var odlData; 
if(localStorage.data){ 
    var data = localStorage.data; 
    //code (use jq to fill html with created table with data) 
} 

warum entfernt ???