javascript - 如何检查firebase实时数据库中的更改值并使它们显示在html表中？

Question

一旦在数据库中删除了表中的条目，我就能够从表中删除条目，并且在编辑条目后也能够添加条目。 how to check if data is already in html table using firebase real time 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()
    });

我尝试将其放在删除方法下，但没有成功。

Answer 1

$('#'+snapshot.key) 获取 HTML 中的正确元素，但 jQuery's change() method不做你认为它做的事。阅读链接的文档以了解它的实际用途。

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

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

类似这样的事情:

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