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 “游戏内名称”栏可编辑。 Add Row/Remove Row，我也想实现，但我不太确定你能不能用这么简单的HTML表格来实现。

我的第一个问题- 我如何使特定行（即游戏名称）成为唯一可编辑的行？我的 Javascript/Jquery 很糟糕，不幸的是，我的研究只允许我改进一行。 （我知道我可能可以复制 javascript/jquery，但肯定有更简单的方法吗？）

第二个问题-

是否可以在没有某种数据库的情况下为 HTML 表添加添加/删除行的功能？

感谢您对此的任何指导。

Answer 1

您可以将div 包裹在td 中并使其可编辑并将固定的width 和height 分配给div，而不是使td 可编辑。

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

 });

是的，如果您知道值，您可以在没有 DB 的情况下从表中添加/删除行。 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 如果这回答了你的问题