javascript - 编辑表格行 JavaScript

Question

我有一个通过 Firebase 动态增加的表格，我需要在表格的每一行上有一个删除和编辑按钮，目前，删除按钮是工作，但我在使用编辑按钮时遇到问题，我看到了一些示例，但我不确定如何使用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>

编辑时，隐藏单击的按钮行并显示该行的编辑模式。因为它已经渲染了，所以如果你有的话它会很好用多行，保持原位: ('#'+id).hide();

编辑模式行“ View ”将显示保存按钮或您需要的任何其他内容。使用相同的技术/策略来调用 save() 方法。

保存成功后，重建两行并替换它们，使所有内容整齐并保持一致。

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

希望这对您有所帮助!