Update Html Table in realtime as data on Firebase RTDB changes

I have an HTML Table linked to a Firebase Real time database. Everything works fine except for one small issue.By using databse.on() instead of database.once(), the table does update as data is changed in the RTDB but it does not ‘replace’ the previously present fields in the table, it instead creates a new set of the updated values.

First Initialization

This is what it does on data update currently:

On Data Update

Heres the HTML script:

<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>

 <table class="table table-striped" id="ex-table">
  <tr id="tr">

  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"
  var database = firebase.database().ref().child('Members');
  database.on('value', function(snapshot){
        var content = '';
              var Name = data.val().Name;
              var Credit = data.val().Credit;
              content += '<tr>';
              content += '<td>' + Name + '</td>';//column1
              content += '<td>' + Credit + '</td>';//column2
              content += '</tr>';



Ive tried changing .append with .replaceWith but that dosent work either. What im looking is just for the values that have been updated in RTDB to update in the table like this:

enter image description here

33 thoughts on “Update Html Table in realtime as data on Firebase RTDB changes”

Leave a Comment