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表格。

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

第二个问题 -

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

感谢您就此提供任何指导。

Answer 1

您可以将td包裹在div内并使其可编辑，并将固定的td和width分配给div，而不是使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());

 });

是的，如果您知道值，则可以在没有DB的情况下添加/删除表中的行。 id可以根据之前的id值计算。

从表中添加/删除不保证DB将更新您需要处理的内容。

在添加行时，您还需要为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如果能回答你的问题

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

1 个答案: