表的 Firebase child_changed

Question

当使用child_added 填充表格时，我使用append() 来显示HTML 表格上的数据，但是如何使用child_changed 来实现呢？我应该删除该行，然后用更改的信息附加一个新行吗？如果是这样，我该如何删除这一行？或者也许使用其他东西而不是 append() 来更新 HTML 表上的数据？

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='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
                                  "</div></td></tr>");
});

Answer 1

对于在 tr 中添加的孩子使用 id

 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 id='row"+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='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
                                      "</div></td></tr>");
    });

为孩子改变

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

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

      document.getElementById("editrow").innerHTML = "<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='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
                                      "</div></td>");
    });

这会有所帮助。