如何在Firebase实时数据库中检查更改的值，并使它们显示在html表中? [英] how to check for changed values in firebase real time database and make them show up in html table?

问题描述

将表中的条目从数据库中删除后，我已经能够从表中删除它们，并且一旦对其进行了编辑，就能够添加表中的条目. 如何使用Firebase实时数据库检查html表中是否已存在数据? 我现在正在寻找如何查找数据库的实时更改.

I have been able to remove entries from the table once it's been removed on the database and also able to add entries once they've been edited. how to check if data is already in html table using firebase real time database? I am now looking for how to look for live changes to the database.

var database = firebase.database().ref().child('transactions');
database.on('child_added', function(snapshot){
    var data = snapshot.val();

    var content = '<tr id="'+snapshot.key+'">';
    content += '<td>' + data.CustomerName + '</td>';//column2
    content += '<td>' + data.TimeEffected + '</td>'; //column1 
    content += '<td>' + data.DateEffected + '</td>'; //column1
    content += '<td>' + data.Successful + '</td>'; //column1
    content += '</tr>';
    $('#ex-table').append(content);

    database.on('child_removed', function(snapshot){
        $('#'+snapshot.key).remove()
    });

});

我尝试使用这个:

database.on('child_changed', function(snapshot){
        $('#'+snapshot.key).change()
    });

我尝试将其置于remove方法下，但未​​成功.

I tried putting it under the remove method but that has been unsuccessful.

推荐答案

$('#'+snapshot.key)获取HTML中正确的元素，但 jQuery的change()方法并没有您认为的那样.阅读链接的文档以了解其实际作用.

The $('#'+snapshot.key) gets the correct element in the HTML, but jQuery's change() method does not do what you think it does. Read the linked documentation to learn what it actually does.

如果您想一下这是否有意义:jQuery的内置方法如何知道如何更新HTML结构?

If you think about if for a moment this should make sense: how would a built-in method from jQuery know how to update your HTML structure?

只有您的代码知道它为快照中的数据创建了什么HTML.您将需要将在child_added回调中创建HTML的代码(部分)复制到child_changed回调中.

Only your code knows what HTML it created for the data in the snapshot. You will need to replicate (some of) your code that creates the HTML in the child_added callback into the child_changed callback.

类似这样的东西:

database.on('child_changed', function(snapshot){
    var data = snapshot.val();

    var content = '<tr id="'+snapshot.key+'">';
    content += '<td>' + data.CustomerName + '</td>';//column2
    content += '<td>' + data.TimeEffected + '</td>'; //column1 
    content += '<td>' + data.DateEffected + '</td>'; //column1
    content += '<td>' + data.Successful + '</td>'; //column1
    content += '</tr>';

    $('#'+snapshot.key).replaceWith(content)
});

这篇关于如何在Firebase实时数据库中检查更改的值，并使它们显示在html表中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！