contenteditable - jQuery將內容保存到網頁（以及添加和刪除）

Question

通過徹底的研究，我能夠在我的表格中編輯和更新一個數據值。然而，當我試圖改變其中CONTENTEDITABLE可編輯，它消除了我的表格式（它實際上完全刪除表格格式，使我的想法毫無意義。

這裏是我當前的代碼。

   <div class="bs-docs-example"> 
      <table class="table table-striped"> 
       <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 id="content2" contenteditable="true">Herbalist</td> 
        <td>Aeterna Top</td> 
       </tr> 
       <tr> 
        <td >2</td> 
        <td >bandido</td> 
        <td >Bananni</td> 
        <td >Aeterna Top</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>Funkystyle</td> 
        <td>Funkystyle</td> 
        <td>Aeterna Top</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
    </div> 
</div> 
    <button id="save">Save Changes</button> 

<!-- begin the script --> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script> 
    var theContent = $('#content2');// set the content 

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

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

現在，理想情況下，我希望它能夠輸出如下面的截圖： http://i.imgur.com/R4TYhRB.png 「Ingame Name」列可編輯 添加行/刪除行，我也想實現，但我不太當然，如果你可以用這樣一個簡單的HTML表格來做到這一點

我的第一個問題 - 我將如何讓特定的行（即Ingame Name）成爲唯一可編輯的行？我很可惜有Javascript/Jquery和我的研究不幸，只允許我改進一行。 （我知道我大概可以複製的JavaScript/jQuery的，但肯定有一個更簡單的方法？）

二question-

是否有可能實際上增加的能力HTML表格添加/刪除行，而不擁有某種數據庫？

感謝有關這方面的任何指導。

Answer 1

而不是讓td編輯，你可以換div內td並使其可編輯和分配固定width和height來覈實。

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

現在有2個選項可以允許隱藏或滾動溢出。您可以檢查行爲並選擇其中一個。作爲用戶友好的體驗，您可以將工具提示分配給懸停或單擊的div，以便每當div內的值被溢出時，用戶可以看到裏面的當前值。

$(".clEdit").hover(function(e) { 

    $(this).prop("title", $(this).html()); 

}); 

是的，如果你知道這些值，你可以從沒有數據庫的表中添加/刪除行。 id可以從以前的id值中計算出來。

從表中添加/刪除不保證數據庫將被更新，您需要處理該數據庫。

在添加行時，您還需要爲contenteditable綁定事件。

$("#add").click(function() { 
    //LOGIC TO ADD ROW TO TABLE 

    var trRow = "<tr><td>" + ++idFirstCol + "</td><td>" + "SecondColValue" + "</td><td><div class='clEdit'>" + "ThirdColValue" + "</div></td>  <td> " + "LastColValue" + " </td></tr>"; 

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

您可以參考的jsfiddle這裏。 http://jsfiddle.net/8mt6d7bz/

LMK如果回答您的問題