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

我建议你这样做：

有两行，一行用于视图，一行用于编辑模式。这更容易维护。
为整行分配一个ID： $("#table_body").append("<tr id='"+assetKey+"'>
然后当点击该编辑按钮时，将id传递给某个方法，就像你追加它时一样，它更容易。你可以用一些东西喜欢onclick并调用方法：

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

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

要理解这一点，并且不仅仅是单词，在jsfiddle here上使用代码的功能性示例。

希望这有帮助！

编辑表格行javascript

1 个答案: