使用jquery將動態創建的表保存到localstorage

我試圖保存動態創建的表的主體，但似乎在本地存儲中保存的唯一東西是沒有任何值的鍵？使用jquery將動態創建的表保存到localstorage

我對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>

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

來源

2014-01-14 x4nga

的問題是在你的代碼的最後一行。這：

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

應該變成這樣：

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

來源

2014-01-14 10:54:43

使用jquery將動態創建的表保存到localstorage

回答

相關問題