Ergebnis 1 bis 7 von 7
  1. #1
    Monamon ist offline Grünschnabel
    registriert
    12-08-2016
    Beiträge
    3

    Dynamische Tabelle im localStorage speichern, geht das?

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

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.646

    AW: Dynamische Tabelle im localStorage speichern, geht das?


  3. #3
    Monamon ist offline Grünschnabel
    registriert
    12-08-2016
    Beiträge
    3

    AW: Dynamische Tabelle im localStorage speichern, geht das?

    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

  4. #4
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Dynamische Tabelle im localStorage speichern, geht das?

    (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-Code:
    //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.
    Geändert von andreax (19-08-2016 um 01:19 Uhr) Grund: keyword ausgebessert localStorage

  5. #5
    Monamon ist offline Grünschnabel
    registriert
    12-08-2016
    Beiträge
    3

    AW: Dynamische Tabelle im localStorage speichern, geht das?

    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

  6. #6
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Dynamische Tabelle im localStorage speichern, geht das?

    Zitat Zitat von Monamon Beitrag anzeigen
    ich weiß nicht woran das liegt, aber das Speichern funktioniert immer noch nicht...die Reihen die ich hinzufüge sind jedesmal wieder weg.
    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. ; )
    Geändert von andreax (17-08-2016 um 00:00 Uhr)

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.681

    AW: Dynamische Tabelle im localStorage speichern, geht das?

    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.

Ähnliche Themen

  1. Dynamische Tabelle mit DOM-Scripting
    Von Gerbil im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 24-10-2012, 21:42
  2. Liste per localstorage speichern?
    Von Headhunter1 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 06-05-2012, 22:43
  3. Mainbody in Tabelle - dynamische Größenanpassung
    Von hinkel11 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 06-03-2009, 13:45
  4. dynamische tabelle abfragen
    Von timste im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 07-03-2006, 11:36
  5. dynamische Tabelle <--> onClick
    Von jj_ im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 05-08-2005, 16:16

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •