Javascript運行不正常？ （忽略我當前的html值）

Question

我有一些Javascript允許我將行添加到當前存在的HTML表中，並保存更改。但是，默認情況下，當我進入頁面時，表格不存在。但是，當我在腳本的特定階段放置斷點時，會出現原始表格，但默認返回Hello，並且不會添加新行。

有沒有人知道我要去哪裏錯了？

JQuery的進口

<script src="js/jquery-2.1.0-beta2.js" type="text/javascript"></script> 

HTML

<div> 
    <table class="table table-striped" id="ConTable"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>IRC Name</th> 
       <th>Ingame Name</th> 
       <th>Position</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>[Cr|m|nAl]</td> 
       <td> 
        <div class='clEdit'> 
         Herbalist 
        </div> 
       </td> 
       <td>Aeterna Top</td> 
      </tr> 
      <tr> 
       <td >2</td> 
       <td >bandido</td> 
       <td> 
        <div class='clEdit'> 
         Bananni 
        </div> 
       </td> 
       <td >Aeterna Top</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Funkystyle</td> 
       <td> 
        <div class='clEdit'> 
         Funkystyle 
        </div> 
       </td> 
       <td>Aeterna Top</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 


<div class="single-one"> 
    <button id="del" class="btn btn-danger">Delete Rows</button> 
</div> 
<div class="single-one"> 
    <button id="add" class="btn btn-primary">Add Rows</button> 
</div> 
<div class="single-one"> 
    <button id="save" class="btn btn-success">Save Changes</button> 
</div> 
<div id="divCon"> 
    &nbsp; 
</div> 

的Javascript

$(".clEdit").prop('contenteditable', true); 
//Try with hover replace click with hover 
$(".clEdit").hover(function (e) { 
    $(this).prop("title", $(this).html()); 
}); 

var idFirstCol; 
//var idFirstCol = 3; 
if (localStorage.getItem('rowID')) 
{ // apply the newContent when it is exist ini localStorage 
    idFirstCol = localStorage.getItem('rowID'); 
} 
else 
{ 
    idFirstCol = 3; //As of now hardcoded to 3 for first load since HTML content has 3 rows 
} 

$("#add").click(function() { 
    //LOGIC TO ADD ROW TO TABLE 
    var trRow = "<tr><td>" 
      + ++idFirstCol 
      + "</td><td><div class='clEdit'>" 
      + "SecondColValue" 
      + "</div><td><div class='clEdit'>" 
      + "ThirdColValue" 
      + "</div></td><td><div class='clEdit'> " 
      + "LastColValue" 
      + "</div></td></tr>"; 


    $("#ConTable").append(trRow); 
    $(".clEdit").hover(function (e) { 
     $(this).prop("title", $(this).html()); 
    }); 

    $(".clEdit").prop('contenteditable', true); 
}); 

var theContent = $('#ConTable');// set the content 
$('#save').on('click', function() { // store the new content in localStorage when the button is clicked 
    var editedContent = theContent.html(); 
    alert(editedContent); 
    localStorage.newContent = editedContent; 
    localStorage.rowID = idFirstCol; 
}); 

if (localStorage.getItem('newContent')) 
{ // apply the newContent when it is exist ini localStorage 
    theContent.html(localStorage.getItem('newContent')); 
} 

CSS

.editable{ 
    background:#EAEAEA 
} 

.clEdit { 
    width : 250px; /*Try chaging it as per need*/ 
    overflow : hidden; /* try scroll with more height */ 
    height : 25px;/*Try chaging it as per need*/ 
} 

這部作品的jsfiddle但不是我的電腦上，所以我不能完全確定什麼是錯（這我是從我的最終承擔的。運行它時，Javascript中不會出現任何錯誤。我也試圖在一個空的網站上嘗試這個，但是它仍然沒有做JavaScript的工作。 （但是表不顯示）

有誰知道我要去的地方錯了嗎？我可以提供截圖以幫助我尋找解決方案。

https://jsfiddle.net/5g2xmsfp/ - 顯示應該發生什麼。

鏈接的問題：contenteditable - JQuery save content just to webpage (as well as adding and removing)

Answer 1

你需要考慮的localStorage的行爲。當用戶添加行並保存時。它被保存在他的本地機器上，特定於瀏覽器。

因此，可以說，如果用戶訪問A和網站默認情況下看到3行。用戶將編輯少量內容並添加新行並保存。

如果用戶訪問B網站的頁面，用戶將默認看到3行，如果他訪問它的第一次。

現在如果用戶A訪問網站從同一瀏覽器的用戶第二次會看到編輯和添加的行。但是，如果用戶從不同的瀏覽器訪問它，則會顯示默認頁面，但僅顯示3行。

我認爲這是發生在你的情況。如果你想保存整個表格，你應該通過服務器上的值保存它，並在顯示時從服務器讀取它並將其顯示在表格中。無論瀏覽器如何，這對所有用戶都是一致的。

也等待其他用戶指導它。