Solution 1 :

Since it seems that your data entries don’t have any unique ID’s because you can even change the “user1” to whatever you’d like, what i did in a similar situation was to save that data they change into the table, and then just update the entire table row by row into firebase, instead of trying to look for one data point to change.

And just for a better user experience i would suggest taking your edit form and replacing the placeholders with the actual values of the input so that your user does not need to retype the entire field in case they only want to change one thing.

Problem :

May I know that how do i retrieve data from the HTML table which the data value is actually retrieve from firebase.

When I need to edit the first row of data (user1,[email protected],lecturer), I will just click the edit button inside the first row.Then, it will prompt up a form which display as in the, I plan to get the specific data for example, when I click the edit button from first row of data, inside the form, It will only append first row of data in the form and the HTML form for input placeholder will show the current specific row data of data. For example, when inside the form, when I click the input field for the email, the placeholder will show up that the current data is [email protected].

Data that retrieve from firebase into HTML table

Form after I clicked the edit button


code in HTML:

    <div id="abc">
        <!-- Popup Div Starts Here -->
    <div id="popupContact">
        <!-- Contact Us Form -->
    <form action="#" id="form" method="post" name="form">
    <img id="close" src="images/3.png" onclick ="div_hide()">
    <h2 >Edit</h2>
    <input id="userID" name="UserID" placeholder="User = user1" type="text">
    <input id="email" name="email" placeholder="Email = [email protected]" type="text">
    <input id="usertype" name="usertype" placeholder="User type = lecturer" type="text">
    <a href="javascript:%20check_empty()" id="update">Update</a>
    <a href="javascript:%20check_empty()" id="cancel" onclick ="div_hide()">Cancel</a>
    <script src="form.js"></script>

Code in javascript = form.js

firebase.database().ref("users").orderByKey().once("value").then(function (snapshot) {
        snapshot.forEach(function(childSnapshot) {
            var user = childSnapshot.ref.getKey();
            var email = childSnapshot.child("email").val();
            var usertype = childSnapshot.child("usertype").val();
        $("#table_body1").append('<tr><td>' + user  +'</td> <td>' + email +'</td> <td>' 
         + usertype   +'</td> <td>' + `<div class="Edit" onclick="div_show()"><img src = 
        "edit.png"></div>`+'</td> <td>' + `<div class="Edit" onclick="delete_show()">. 
          <img src = "delete.png"></div>` + '</td> </tr>');           


//ref.getKey() to get the users
//childSnapshot.ref.getKey(); to get the user1,user2, user3

// Validating Empty Field
function check_empty() {
    if (document.getElementById('userId').value == "" || document.getElementById('email').value == "" || document.getElementById('usertype').value ==  "") {
        alert("Fill All Fields !");
    } else {
        alert("Form Submitted Successfully...");
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";

                var user = document.getElementById("user").value;

                firebase.database().ref('users/'+user).once('value').then(function (snapshot){
                    var email = snapshot.val().email;
                    var usertype = snapshot.val().usertype;
                  // var email = childSnapshot.child("email").val();
           // var usertype = childSnapshot.child("usertype").val();  
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";