Javascript 在不重复旧值的情况下将Firebase DB值获取到HTML表_Javascript_Html_Firebase_Firebase Realtime Database

Javascript 在不重复旧值的情况下将Firebase DB值获取到HTML表

javascript html firebase

Javascript 在不重复旧值的情况下将Firebase DB值获取到HTML表,javascript,html,firebase,firebase-realtime-database,Javascript,Html,Firebase,Firebase Realtime Database,我试图将我的Firebase DB值显示到HTML表中。当我添加这些值时，我的前端表应该会自动更新，而无需刷新。我能够做到这一点，但它也会以某种方式将最新的值附加到表的顶部。不知道怎么了以下是我嵌入其中的HTML和JS： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Customer table</title> <s

我试图将我的Firebase DB值显示到HTML表中。当我添加这些值时，我的前端表应该会自动更新，而无需刷新。我能够做到这一点，但它也会以某种方式将最新的值附加到表的顶部。不知道怎么了

以下是我嵌入其中的HTML和JS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Customer table</title>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>

  <body>
    <table class="table table-striped" id="ex-table">
      <tr id="tr">
        <th>Email</th>
        <th>Name</th>
        <th>Phone</th>
      </tr>
    </table>

    <script>
      var config = {
        apiKey: "AIzaSyAV97WnhtDpk-2KKefww6tmuAJeTYA_ql0",
        authDomain: "testproject-e2435.firebaseapp.com",
        databaseURL: "https://testproject-e2435.firebaseio.com",
        projectId: "testproject-e2435",
        storageBucket: "testproject-e2435.appspot.com",
        messagingSenderId: "276265166035",
        appId: "1:276265166035:web:8be86e78d3e3cdaeca2026",
        measurementId: "G-8ZFYCDXPR2"
      };
      firebase.initializeApp(config);
      var database = firebase.database().ref().child('testproject-e2435/Customer');
      database.once('value', function(snapshot){
          if(snapshot.exists()){
              var content = '';
              snapshot.forEach(function(data){
                  var Email = data.val().Email;
                  var Name = data.val().Name;
                  var Phone = data.val().Phone;
                  content += '<tr>';
                  content += '<td>' + Email + '</td>'; //column1
                  content += '<td>' + Name + '</td>';//column2
                  content += '<td>' + Phone + '</td>';//column2
                  content += '</tr>';
              });
              $('#ex-table').append(content);
          }
      });

      database.limitToLast(1).on('value', function(snapshot){
          if(snapshot.exists()){
              var content = '';
              snapshot.forEach(function(data){
                  var Email = data.val().Email;
                  var Name = data.val().Name;
                  var Phone = data.val().Phone;
                  content += '<tr>';
                  content += '<td>' + Email + '</td>'; //column1
                  content += '<td>' + Name + '</td>';//column2
                  content += '<td>' + Phone + '</td>';//column2
                  content += '</tr>';
              });
              $('#ex-table').append(content);
          }
      });
    </script>
  </body>
</html>


客户表
电子邮件
名称
电话
变量配置={
apiKey:“AIzaSyAV97WnhtDpk-2KKefww6tmuAJeTYA_ql0”，
authDomain:“testproject-e2435.firebaseapp.com”，
数据库URL:“https://testproject-e2435.firebaseio.com",
projectId:“testproject-e2435”，
storageBucket:“testproject-e2435.appspot.com”，
messagingSenderId：“276265166035”，
appId:“1:276265166035:web:8be86e78d3e3cdaeca2026”，
测量TID：“G-8ZFYCDXPR2”
};
firebase.initializeApp（配置）；
var database=firebase.database（）.ref（）.child（'testproject-e2435/Customer'）；
数据库.once（'value'，函数（快照）{
if（snapshot.exists（））{
var内容=“”；
snapshot.forEach（函数（数据）{
var Email=data.val（）.Email；
var Name=data.val（）.Name；
var Phone=data.val（）.Phone；
内容+=''；
内容+=''+电子邮件+''；//第1列
content+=''+Name+''；//column2
内容+=''+电话+''；//第2列
内容+=''；
});
$（'#ex table'）。追加（内容）；
}
});
database.limitToLast（1）.on（'value'，函数（快照）{
if（snapshot.exists（））{
var内容=“”；
snapshot.forEach（函数（数据）{
var Email=data.val（）.Email；
var Name=data.val（）.Name；
var Phone=data.val（）.Phone；
内容+=''；
内容+=''+电子邮件+''；//第1列
content+=''+Name+''；//column2
内容+=''+电话+''；//第2列
内容+=''；
});
$（'#ex table'）。追加（内容）；
}
});

如果我正确理解了您的需求（“当我添加值时，我的前端表应该自动更新，而无需刷新”），那么您应该只声明一个包含方法和事件的侦听器

您不需要将对

once（）

方法的调用与侦听器（使用该方法）的调用结合起来，因为如文档中所述：
子项添加事件
此时，每个初始子级将触发一次此事件位置，并将在每次创建新的子对象时再次触发补充说
以下方面应起作用：

database.on('child_added', function (snapshot) { var content = ''; var Email = snapshot.val().Email; var Name = snapshot.val().Name; var Phone = snapshot.val().Phone; content += '<tr>'; content += '<td>' + Email + '</td>'; //column1 content += '<td>' + Name + '</td>';//column2 content += '<td>' + Phone + '</td>';//column2 content += '</tr>'; $('#ex-table').append(content); });

database.on（'child_added'，函数（快照）{ var内容=“”； var Email=snapshot.val（）.Email； var Name=snapshot.val（）.Name； var Phone=snapshot.val（）.Phone；内容+=''；内容+=''+电子邮件+''；//第1列 content+=''+Name+''；//column2 内容+=''+电话+''；//第2列内容+=''； $（'#ex table'）。追加（内容）； });
如果我正确理解了您的需求（“当我添加值时，我的前端表应该自动更新，而无需刷新”），那么您应该只声明一个包含方法和事件的侦听器
您不需要将对
once（）
方法的调用与侦听器（使用该方法）的调用结合起来，因为如文档中所述：
子项添加事件
此时，每个初始子级将触发一次此事件位置，并将在每次创建新的子对象时再次触发补充说
以下方面应起作用：

database.on('child_added', function (snapshot) { var content = ''; var Email = snapshot.val().Email; var Name = snapshot.val().Name; var Phone = snapshot.val().Phone; content += '<tr>'; content += '<td>' + Email + '</td>'; //column1 content += '<td>' + Name + '</td>';//column2 content += '<td>' + Phone + '</td>';//column2 content += '</tr>'; $('#ex-table').append(content); });

database.on（'child_added'，函数（快照）{ var内容=“”； var Email=snapshot.val（）.Email； var Name=snapshot.val（）.Name； var Phone=snapshot.val（）.Phone；内容+=''；内容+=''+电子邮件+''；//第1列 content+=''+Name+''；//column2 内容+=''+电话+''；//第2列内容+=''； $（'#ex table'）。追加（内容）； });