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

我可以在数据库中删除表中的条目，也可以在编辑条目后添加条目。 我现在正在寻找如何查找对数据库的实时更改

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

});

我尝试将其置于移除方法下，但没有成功

HTML中的

$（'#'+snapshot.key）

获取了正确的元素，但并没有像您认为的那样。阅读链接文档以了解其实际功能

如果您考虑一下这是否有意义：jQuery中的内置方法如何更新您的HTML结构

只有您的代码知道它为快照中的数据创建了什么HTML。您需要将（部分）在添加的

child\u

回调中创建HTML的代码复制到更改的

child\u

回调中

大概是这样的：

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

database.on（'child_changed'，函数（快照）{
var data=snapshot.val（）；
var内容=“”；
content+=''+data.CustomerName+''；//column2
content+=''+data.timeimpacted+''；//column1
content+=''+data.dateimpacted+''；//column1
内容+=''+数据。成功+''；//列1
内容+=''；
$（'#'+snapshot.key）.替换为（内容）
});

The

$（“#”+snapshot.key）

在HTML中获取正确的元素，但它不会执行您认为它会执行的操作。阅读链接文档以了解其实际功能

如果您考虑一下这是否有意义：jQuery中的内置方法如何更新您的HTML结构

只有您的代码知道它为快照中的数据创建了什么HTML。您需要将（部分）在添加的

child\u

回调中创建HTML的代码复制到更改的

child\u

回调中

大概是这样的：

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

database.on（'child_changed'，函数（快照）{
var data=snapshot.val（）；
var内容=“”；
content+=''+data.CustomerName+''；//column2
content+=''+data.timeimpacted+''；//column1
content+=''+data.dateimpacted+''；//column1
内容+=''+数据。成功+''；//列1
内容+=''；
$（'#'+snapshot.key）.替换为（内容）
});

您希望这一行做什么

$（'#'+snapshot.key）.change（）

请参见我希望它找到已更改的快照，并将其更改为与数据库对应。您希望此行做什么<代码>$（'#'+snapshot.key）.change（）请参阅我希望它能找到已更改的快照，并将其更改为与我尝试查找要添加内容的数据库相对应。我要添加什么才能使它工作，因为我还不知道如何使它工作。对于我添加的最后一行，$（'#'+snapshot.key）。remove（）$（'#ex table'）。append（content），它似乎工作了。它是否有效？它可能是

replaceWith（）

。更新了我的答案。我已尝试查找要添加的内容。我要添加什么才能使它工作，因为我还不知道如何使它工作。对于我添加的最后一行，$（'#'+snapshot.key）。remove（）$（'#ex table'）。append（content），它似乎工作了。它是否有效？它可能是

replaceWith（）

。更新了我的答案。