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>");
    });

这会有所帮助。

表格的Firebase child_changed

1 个答案: