Javascript contenteditable-JQuery仅将内容保存到网页（以及添加和删除）

经过深入研究，我能够在我的表中编辑和更新一个数据值。然而，当我试图改变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>

现在，理想情况下，我希望它像下面的屏幕截图一样输出； Ingame Name列可编辑。 添加行/删除行，我也想实现，但我不太确定是否可以用这样一个简单的HTML表来实现

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

第二个问题-

有没有可能在不使用某种数据库的情况下为HTML表添加/删除行的功能

感谢您提供的相关指导。

您可以将div包装在td内，使其可编辑，并为div指定固定的宽度和高度，而不是使td可编辑

现在有两个选项，要么允许隐藏溢出，要么滚动。您可以检查行为并选择其中一个。作为一种用户友好的体验，您可以在悬停或单击时为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

---

Lmk如果这回答了你的问题

你能把它添加到JSFIDLE或其他东西中吗？因此，我们可以更好地了解您使用的资源。JS小提琴。我想用我的javascript编辑所有ingame名称行以进行保存。我认为它不会工作，因为它是基于css类的？@BrianElliott你是什么意思？它是否基于类或id并不重要，您可以始终将其保存在localstorage或db中。-我的意思是，“保存”按钮是否应该按逻辑工作。由于某种原因，它不知道它到底出了什么问题，尽管它因为某种原因看不见它。表示页面不存在。从任何位置每次刷新页面并添加新行时，页面将为4。因为在js add函数中，它被硬编码为3，以生成上面的动态跟随注释。

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