Question

我正在尝试保存动态创建的表的主体，但似乎唯一保存在本地存储中的是没有任何值的键？

我也对document.ready函数的位置与所有行为的方式是否有任何关系感兴趣。

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();
});

Answer 1

问题出在代码的最后几行。这样：

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

应该变成这个：

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

使用jquery将动态创建的表保存到localstorage中

1 个答案: