Wie dynamisch erstellte Tabelle nach Fenster reload

Question

Mein Code behalten, über einen Klick

-Createlist() auf genannt wird „create table“ Knopf-fügt Tabellenzeile auf jedem Klick

-Deletelist() dynamische Tabelle erstellen auf "entfernen Tabelle" Knopf-löscht Reihe

var flag =0; 
function createlist(){ 
    var info = {}; 
    info.name = document.forms["myform"]["name"].value; 
    info.gender = document.forms["myform"]["gender"].value; 
    info.age = document.forms["myform"]["age"].value; 
    var header; 
    var node = []; 
    node[0] = document.createTextNode('Name'); 
    node[1] = document.createTextNode('Gender'); 
    node[2] = document.createTextNode('Age'); 

    if(flag==0){ 
     for(var i=0;i<3;i++){ 
      var header = document.createElement('TH'); 
      header.setAttribute('class','header'); 
      header.appendChild(node[i]); 
      document.getElementById('list').appendChild(header); 
      flag = 1; 
     } 
    } 

    var tr = document.createElement('TR'); 
    for(var key in info){ 
     if (info.hasOwnProperty(key)) { 
      var td = document.createElement('TD'); 
      td.textContent = info[key]; 
      tr.appendChild(td); 
     } 
    } 
    document.getElementById('list').appendChild(tr); 
} 

Answer 1

Ich bin nicht wirklich ein Fan von diesem Ansatz machen. Ich würde empfehlen, dafür eine Datenbank zu verwenden und die Daten auf jeder Seite geladen zu bekommen. Wenn jemand eine massive Tabelle erstellt, werden diese Informationen in der localStorage des Browsers gespeichert ...

Aber wenn Sie darauf bestehen, ist hier unten ein Beispiel, wie ich es implementiert habe. Bitte beachten Sie, dass dies aus Sicherheitsgründen nicht auf SO funktioniert. Für ein Live-Arbeitsbeispiel überprüfen Sie bitte this fiddle. Stellen Sie sicher, dass Sie präzise Benennungen verwenden. Das mytable Beispiel, das ich verwendet habe, ist kein gutes Beispiel, weil ein anderer Entwickler dies überschreiben kann, wenn er das auch benutzt.

// this one reads the table and adds it to the storage 
 
function addToStorage() { 
 
    const rows = document.querySelectorAll('#t tbody tr'); 
 
    const col1 = []; // each column will have their own array. Please name them accordingly 
 
    const col2 = []; 
 
    for (let i = 0; i < rows.length; ++i) { 
 
    const tds = rows[i].children; 
 
    col1.push(tds[0].textContent); 
 
    col2.push(tds[1].textContent); 
 
    } 
 
    // "mytable" is just an example. PLEASE PICK A GOOD AND CONCISE NAME ! 
 
    window.localStorage.setItem('mytable', JSON.stringify({ 
 
    col1: col1, 
 
    col2: col2 
 
    })); 
 
} 
 

 
// this one cleans the table (to show PoC) 
 
function clearTable() { 
 
    const t = document.querySelector('#t tbody'); 
 
    t.innerHTML = ''; 
 
} 
 

 
// duh 
 
function makeTd(txtContent) { 
 
    const td = document.createElement('td'); 
 
    td.textContent = txtContent; 
 
    return td; 
 
} 
 

 
// this one gets the info from storage and displays the table content if present 
 
function getFromStorage() { 
 
    const infoFromStorage = window.localStorage.getItem('mytable'); 
 
    if (infoFromStorage) { 
 
     const json = JSON.parse(infoFromStorage); 
 
     const tbody = document.querySelector('#t tbody'); 
 
     for(let i = 0; i < json.col1.length; ++i) { 
 
      const tr = document.createElement('tr'); 
 
      tr.appendChild(makeTd(json.col1[i])); // note, column names must match with that one in addToStorage 
 
      tr.appendChild(makeTd(json.col2[i])); 
 
      tbody.appendChild(tr); 
 
     } 
 
    } 
 
    else { 
 
    console.log('not present in storage. Find a tactic to handle this'); 
 
    } 
 
} 
 

 

 

 
document.getElementById('add').addEventListener('click', addToStorage); 
 
document.getElementById('clear').addEventListener('click', clearTable); 
 
document.getElementById('get').addEventListener('click', getFromStorage);

<button id="add">Add to storage</button> 
 
<button id="clear">Clear</button> 
 
<button id="get">Get from storage</button> 
 
<table id="t"> 
 
    <thead> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>foo_1</td> 
 
     <td>foo_2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>bar_1</td> 
 
     <td>bar_2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>lorum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Es gibt 2 Möglichkeiten genannt wird. Zuallererst können Sie Ihre Daten auf dem Server speichern, während Sie die Tabellen erstellen und sie nach dem Neuladen der Seite abrufen. Oder können Sie localStorage zum Speichern stopft verwenden.]

if (typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Sorry! No Web Storage support.. 
    //if not support storage I think you can append the data to the url, and parse the url after page reload 
} 

Answer 3

Sie können mit html5 local die Tabellendaten vorübergehend speichern und lesen Sie es auf Seite refresh zurück.

Answer 4

Sie können Gebrauch machen localStorage.setItem()

localStorage.setItem(name,"harsh"); 
localStorage.setItem(gender,"male"); 
localStorage.setItem(age,"24");