2017-06-02 3 views
1

child_addedを使用してテーブルを作成する場合、append()を使用してHTMLテーブルのデータを表示しますが、child_changedとの対処方法は?行を削除して、変更された情報で新しい行を追加する必要がありますか?もしそうなら、この行を削除するには?あるいは、append()の代わりに何か他のものを使用して、HTMLテーブルのデータを更新できますか?子供のためにテーブル用のfirebase child_changed

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

答えて

2

を変更しました子供のためのTR

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

での使用IDを追加

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

これが役に立ちます。

+0

申し訳ありませんが、 'data-id'を' id'に変更すると問題が見つかりました。私は現在 'delete-button 'に' data-id'を使っています。それは 'id'に、それは動作を停止します... 削除ボタンのコードは次のとおりです: https://pastebin.com/YGvK1mhT –

関連する問題