• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Dynamische Tabelle im localStorage speichern, geht das?

M

Monamon

New member
Hey ihr,

erstmal ein bisschen was zu meinem Projekt:
Mein Projekt ist eine Art Zeit Planer. Es ist eine Tabelle in welche man den Kunden eintragen kann und dann die Stunden und Minuten für verschiedene Arbeitsbereiche hinzufügen. Am ende steht die Summe der Stunden, die man für den Kunden gearbeitet hat.
Man kann neue Zeilen hinzufügen und löschen in der Tabelle.
Für mich ist das Projekt ein kleines Selbststudium zum Thema JavaScript und bis jetzt hat das alles auch super funktioniert. Sieht genau so aus, wie ich es wollte :).

Jetzt zu meinem Problem:
Da ich mich wirklich nicht gut mit Js auskenne, komm ich mit dem Speichern der Tabelle nicht weiter.
Ich hab viel im Internet gesucht und ausprobiert, aber wahrscheinlich mach ich das alles auch komplett falsch.
Ich würde gerne alle Zeilen die existieren mit deren Daten abspeichern können, damit man am nächsten Tag oder so weiter daran arbeiten kann. Ich dachte mir, dass das Speichern mit localStorage vielleicht am besten passt, weil die Seite offline bleiben wird.

Hier der HTML - Code:
HTML: 
<table class="table" id="table">
    <tr>
    	<th>Ordername</th>
    	<th>Ordernumber</th>
    	<th>Pitch</th>
    	<th></th>
    	<th></th>
    	<th></th>
    	<th></th>
    	<th></th>
    	<th></th>
    	<th>Prodection</th>
    	<th></th>
    	<th></th>
    </tr>
    <tr>
    	<td style="width:10%"></td>
    	<td style="width:10%"></td>
    	<td>Research</td>
    	<td>Design</td>
    	<td>Modification</td>
    	<td>Layouts</td>
    	<td>Specification</td>
    	<td>Revision</td>
    	<td>Communication</td>
    	<td>Working Drawings</td>
    	<td>Admin Project Managment</td>
    	<td>Graphics</td>
        <td><input type="button" onclick="showResults()" value="Results"></td>
        <td><input type="button" onclick="addRow(this)" value="Add Row"></td>
    </tr>
    <tr>
        <td>Time Sum</td>
        <td></td>
        <td id="ResResult"></td>
        <td id="DeResult"></td>
        <td id="MoResult"></td>
        <td id="LaResult"></td>
        <td id="SpResult"></td>
        <td id="RevResult"></td>
        <td id="CoResult"></td>
        <td id="WoResult"></td>
        <td id="AdResult"></td>
        <td id="GrResult"></td>
        <td></td>
        <td></td>
    </tr>
   
  </table>
</div>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default" onclick="save()">Save</button>
  <button type="button" class="btn btn-default" onclick="load()">Load</button>
</div>

Und JS:
Code: 
function addRow(r){
    count++;
    rowcount++;
    var i = r.parentNode.parentNode.rowIndex;
	var table = document.getElementById("table");
	var row = table.insertRow(i + rowcount);

    var cell1 = row.insertCell(0);
    var textinput = document.createElement('input');
    textinput.type = "text";
    cell1.appendChild(textinput);

    var cell2 = row.insertCell(1);
    var textinput2 = document.createElement('input');
    textinput2.type = "text";
    cell2.appendChild(textinput2);

    var cell3 = row.insertCell(2);
    var timeinput1 = document.createElement('input');
    timeinput1.type = "time";
    timeinput1.step = "1800";
    timeinput1.value = "00:00";
    cell3.appendChild(timeinput1);

    var cell4 = row.insertCell(3);
    var timeinput2 = document.createElement('input');
    timeinput2.type = "time";
    timeinput2.step = "1800";
    timeinput2.value = "00:00";
    cell4.appendChild(timeinput2);
   
    var cell5 = row.insertCell(4);
    var timeinput3 = document.createElement('input');
    timeinput3.type = "time";
    timeinput3.step = "1800";
    timeinput3.value = "00:00";
    cell5.appendChild(timeinput3);

    var cell6 = row.insertCell(5);
    var timeinput4 = document.createElement('input');
    timeinput4.type = "time";
    timeinput4.step = "1800";
    timeinput4.value = "00:00";
    cell6.appendChild(timeinput4);

    var cell7 = row.insertCell(6);
    var timeinput5 = document.createElement('input');
    timeinput5.type = "time";
    timeinput5.step = "1800";
    timeinput5.value = "00:00";
    cell7.appendChild(timeinput5);

    var cell8 = row.insertCell(7);
    var timeinput6 = document.createElement('input');
    timeinput6.type = "time";
    timeinput6.step = "1800";
    timeinput6.value = "00:00";
    cell8.appendChild(timeinput6);

    var cell9 = row.insertCell(8);
    var timeinput7 = document.createElement('input');
    timeinput7.type = "time";
    timeinput7.step = "1800";
    timeinput7.value = "00:00";
    cell9.appendChild(timeinput7);

    var cell10 = row.insertCell(9);
    var timeinput8 = document.createElement('input');
    timeinput8.type = "time";
    timeinput8.step = "1800";
    timeinput8.value = "00:00";
    cell10.appendChild(timeinput8);

    var cell11 = row.insertCell(10);
    var timeinput9 = document.createElement('input');
    timeinput9.type = "time";
    timeinput9.step = "1800";
    timeinput9.value = "00:00";
    cell11.appendChild(timeinput9);

    var cell12 = row.insertCell(11);
    var timeinput10 = document.createElement('input');
    timeinput10.type = "time";
    timeinput10.step = "1800";
    timeinput10.value = "00:00";
    cell12.appendChild(timeinput10);

    var cell13 = row.insertCell(12);

    var cell14 = row.insertCell(13);
    var button = document.createElement('input');
    button.type = "button";
    button.value = "Delete";
    button.setAttribute("onclick", 'deleteRow(this)');
    cell14.appendChild(button);

    var length = table.rows.length;
    for (var i = 2; i < length -1; i++) {
        table.rows[i].cells[0].id = i + "Ordername";
        table.rows[i].cells[1].id = i + "Ordernumber"; 
        table.rows[i].cells[2].id = "Research" + i;
        table.rows[i].cells[3].id = "Design" + i;
        table.rows[i].cells[4].id = "Modification" + i;
        table.rows[i].cells[5].id = "Layouts" + i;
        table.rows[i].cells[6].id = "Specification" + i;
        table.rows[i].cells[7].id = "Revision" + i;
        table.rows[i].cells[8].id = "Communication" + i;
        table.rows[i].cells[9].id = "Working" + i;
        table.rows[i].cells[10].id = "Admin" + i;
        table.rows[i].cells[11].id = "Graphics" + i;
        table.rows[i].cells[12].id = "Results" + i;
    };
    
}

Im Js ist jetzt nicht der komplette Code drin, da fehlt noch das berechnen der Summen und das löschen einer Zeile, aber ich dachte, dass ist hierfür vielleicht nicht unbedingt notwendig und wäre auch ziemlich lang geworden.

Ich hab des wahrscheinlich alles ein bisschen umständlicher gemacht, als manch anderer, aber ich bin ganz froh, dass es funktioniert :).

Ich hoffe, dass ihr mir helfen könnt. Falls es mit localStorage nicht funktioniert, dann such ich nach einer anderen Lösung :).

Danke schonmal

Lg Mona
 
Hey danke für die schnelle Antwort, aber ich hab schon alle Seiten mit Erklärungen wie localStorage funktioniert durch geguckt und selber probiert, aber ich weiß wirklich nicht wie ich des für meinen Code umsetzen muss :O
 
(Zitat monaman) ich hab schon alle Seiten mit Erklärungen wie localStorage funktioniert durch geguckt !

Dann wirst du auch gelesen haben das der Speicherplatz beschränkt ist und mit anderen Webseiten geteilt wird.
Und der User den Browser-Cache nicht leeren sollte.
Wenn das kein Hindernis für dich ist .
dann zb.

PHP: 
//speichern
localStorage.setItem('mytable',document.getElementbyId('tableID').innerHTML);

//ausgeben
document.getElementbyId('tableID').innerHTML = localStorage.getItem('mytable');

aber um platz zu sparen solltest du ein thead tbody und tfoot verwenden und dann nur den tbody. speichern und wieder einlesen.

- - - Aktualisiert - - -

sollte der Speicherplatz doch zu eng werden dann such mal nach ADOBE AIR da ist eine sql-light DB mit dabei.
 
Zuletzt bearbeitet von einem Moderator:
Hmm...danke,

ich weiß nicht woran das liegt, aber das Speichern funktioniert immer noch nicht...die Reihen die ich hinzufüge sind jedesmal wieder weg.

Ja das mit dem Speicherplatz weiß ich schon, danke, ich dachte einfach das localStorage für eine lokale Anwendung am einfachsten wäre, aber vielleicht ist das mit DB doch besser?
Ich hab schon viel mit mySQL gearbeitet, jedoch nie in Verbindung mit einer Webseite. Vielleicht ist das ja eine viel einfachere Lösung?

Danke für die Antworten :)
 
Monamon schrieb:
ich weiß nicht woran das liegt, aber das Speichern funktioniert immer noch nicht...die Reihen die ich hinzufüge sind jedesmal wieder weg.
Zum Vergrößern anklicken....
Wenn die Reihen weg sind nach dem browser reset dann musst du die Reihen aus dem LStorage holen.

hier liegt ein Fiddle dass könnte dir weiterhelfen. ; )
 
Zuletzt bearbeitet von einem Moderator:
NB: das komplette HTML in localStorage zu schreiben, scheint mir ziemliche Speicherplatzverschwendung zu sein. Jede Tabellenzeile (oder Spalte) sollte doch rigendwie ein Objekt darstellen. Serialisiere dieses Array von Objekten doch (z.B. mit JSON) und speicher' diesen String. Trennt außerdem noch Inhalt von Darstellung, was immer eine gute Idee ist.

PS: "funktioniert nicht" ist keine gute Fehlerbeschreibung. V.A. wenn du nicht zeigst, was du eigentlich probiert hast.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben