CODEWITHSUNDEEP
jqueryhtmllocal-storage
x4nga
x4nga

Reputation: 37

Saving dynamically created table into localstorage with jquery

I'm trying to save the body of a dynamically created table but the only thing that seems to get saved in local storage is the key without any values?

I'm also interested in whether the position of the document.ready function is of any relevance to way everything behaves.

HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <form>
        <p>
        Naslov opravila: <input id="naslov" type="text" name="naslov">
        Vrsta opravila: <input id="vrsta" type="text" name="vrsta">
        Nivo pomembnosti: 
        <select name="nivo" class="nivo">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <button id="button">Dodaj opravilo</button>
        </form>
        </p>
        <img id="slika" src="minus.jpg" alt="slike ni mogoče prikazati"/><br/>
        <table id="1" class="tabela" cellspacing="3" style="text-align:center">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Opravilo</th>
                    <th>Vrsta</th>
                    <th>Nujnost</th>
                    <th>Datum vnosa</th>
                </tr>
            </thead>
            <tbody id="telo">
            </tbody>

        </table>
        <button id="odstrani">Odstrani</button>
        <button id="shrani">Shrani</button>
        <script src="script.js"></script>
    </body>
</html>

AND JAVASCRIPT:

$( document ).ready(function() {
    document.getElementById("1").innerHTML=localStorage.tabela;
});

$('#button').on('click', function(event) {
    var naslov = $('#naslov').val();
    var vrsta = $('#vrsta').val();
    var nivo = $('.nivo option:selected').val();
    var vrste = $('#telo').find('tr').length;
    var datum = new Date();
    var d = datum.getDate() + "." + (datum.getMonth()+1) + "." + datum.getFullYear();
    if(naslov.length > 0) {
        var novavrsta = $('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
        novavrsta.children().eq(0).text(vrste+1);
        novavrsta.children().eq(1).text(naslov);
        novavrsta.children().eq(2).text(vrsta);
        novavrsta.children().eq(3).text(nivo);
        novavrsta.children().eq(4).text(d);
        novavrsta.appendTo('#telo');
        $( '#telo tr' ).addClass(function( index ) {
            return "vrsta" + (index+1);
        });
    }
    return false;
});

$(document).on('click', '#telo tr', function(){
    if ( $( this ).hasClass( "izbrano" )){
        $(this).css( "background-color","white" );
        $(this).removeClass( "izbrano" );
    }else{
        $(this).css( "background-color","red" );
        $(this).addClass( "izbrano" );
    }
});

$('#odstrani').on('click', function(event) {
    $('.izbrano').remove();
});

$('#slika').on('click', function () {
  if ( $( '.tabela, .odstrani' ).is( ":hidden" ) ) {
    $( '.tabela, .odstrani' ).slideDown( "slow" );
    $('#slika').attr('src', 'minus.jpg');
  } else {
    $( ".tabela, .odstrani" ).hide();
    $('#slika').attr('src', 'plus.jpg');
  }
});

$( window ).unload(function() {
    localStorage.tabela=('.tabela').val();
});

Upvotes: 0

Views: 1828

Answers (1)

Ioannis Karadimas
Ioannis Karadimas

Reputation: 7896

The problem is in the last lines of your code. This:

$( window ).unload(function() {
   localStorage.tabela=('.tabela).val();
});

should turn into this:

$( window ).unload(function() {
   localStorage.tabela = $('.tabela').html();
});

Upvotes: 2

Related Questions