编辑表格行javascript

Question

我有一个表格，它是通过 Firebase 动态增加的，我需要在表格的每一行上都有一个 delete 和 edit 按钮，目前，删除按钮正在工作，但我在编辑时遇到了问题按钮，我看到了一些例子，但我不确定如何使用 append()...

这是我目前所拥有的：

HTML

<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">

    <thead>
      <tr id="tableHeader">
        <th class="mdl-data-table__cell--non-numeric">Name</th>
        <th class="mdl-data-table__cell--non-numeric">Brand</th>
        <th class="mdl-data-table__cell--non-numeric"> </th>
      </tr>
    </thead>

    <tbody id="table_body"> </tbody>

</table>

JavaScript

rootRef.on("child_added", snap => {

  var assetKey = snap.child("id").val();
  var name = snap.child("name").val();
  var brand = snap.child("brand").val();

  $("#table_body").append("<tr data-id='"+assetKey+"'>"+
                          "<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
                          "<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +

                          "<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
                              "<button class='edit-btn'><i class='material-icons'>mode_edit</i></button>"+" "+                                      
                              "<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
                          "</div></td></tr>");
});

这就是我对编辑按钮的想法：隐藏整行，并使用保存的信息添加一个新行，但使用文本字段，并使用保存按钮更改编辑按钮，但我有不知道我应该怎么做...

$("#table_body").on('click','.edit-btn', function(e){
var $row = $(this).closest('tr');
  $row.hide();

});

Answer 1

我建议你这样做：

1. 有两行，一用于查看，一用于编辑模式。这更容易 维护。
2. 为整行分配一个 id： $("#table_body").append("<tr id='"+assetKey+"'>
3. 然后，当单击该编辑按钮时，将 id 传递给某个方法，就像在附加时一样，这样会更容易。你可以使用一些东西 像 onclick 一样调用方法：

<button class='edit-btn' onclick=edit(\'"+assetKey+"\')><i class='material-icons'>mode_edit</i></button>

4. 在编辑时，隐藏单击的按钮行并显示该行的编辑模式。由于它已经渲染，如果你有它会很好用 多行，保持原位： ('#'+id).hide();
5. 编辑模式行“视图”将显示保存按钮或您需要的任何其他内容。使用相同的技术/策略来调用 save() 方法。
6. 保存成功后，重建两行并替换它们，使所有内容都整齐并保持一致。

为了理解这一点，它不仅仅是在文字上，而是在 jsfiddle here 上使用您的代码的功能示例。

希望对您有所帮助！