Question

我有一个链接到 Firebase 实时数据库的 HTML 表。除了一个小问题外，一切正常。通过使用 databse.on() 而不是 database.once()，表会随着 RTDB 中的数据更改而更新，但不会“替换”表中先前存在的字段，相反，它会创建一组新的更新值。

这是它目前在数据更新上所做的：

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>Name</th>
    <th>Credit</th>
  </tr>
</table>

<script>
  var config = {
     apiKey: "AIzaSyB0WrqbEu4kgR1-INNyKpAu8bfvfy0VOVc",
authDomain: "fir-freelance-fd0e6.firebaseapp.com",
databaseURL: "https://fir-freelance-fd0e6-default-rtdb.firebaseio.com",
projectId: "fir-freelance-fd0e6",
storageBucket: "fir-freelance-fd0e6.appspot.com",
messagingSenderId: "967741636284",
appId: "1:967741636284:web:426d2ef2112f9008945ab9"
  };
  firebase.initializeApp(config);
  var database = firebase.database().ref().child('Members');
  database.on('value', function(snapshot){
      if(snapshot.exists()){  
        var content = '';
         
          snapshot.forEach(function(data){
              var Name = data.val().Name;
              var Credit = data.val().Credit;
              content += '<tr>';
              content += '<td>' + Name + '</td>';//column1
              content += '<td>' + Credit + '</td>';//column2
              content += '</tr>';
 
         });

$('#ex-table').append(content); 

}
});
</script>

我试过用 .append 改变 .replaceWith 但那也不起作用。我正在寻找的只是在 RTDB 中更新的值在表中更新，如下所示：

Answer 1

解决此问题的最简单方法是在添加更新内容之前清除表格：

$('#ex-table').html(content);

如果您有许多更新和/或许多节点，这可能会导致 HTML 闪烁。如果这对您的应用造成问题，您可以 listen to the child_ events 而不是整个值，并根据是否添加、更改或删除子节点对 HTML 执行更精细的更新。

随着 Firebase RTDB 数据的变化实时更新 Html 表

1 个答案: