Edit table row javascript with firebase

Question

I have a table, that is dynamically increased with Firebase, and I need an edit button on each row of the table. I am having trouble with the edit button, how I can update data based on the id of each user and save this update then display table with the update.

      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            <thead>
              <tr>
                <th>Email</th>
                <th>Password </th>
                <th>edit</th>
              </tr>
            </thead>
            <tbody id="tablel">
            </tbody>
          </table>
        </div>
      </div>

Javascript

var ref = firebase.database().ref("Puser");

ref.on('value',function(snapshot){


 var content ='';
snapshot.forEach(function(data){

  var val = data.val();
  content += '<tr>';
  content += '<td>' + val.email +'</td>';
  content += '<td>' + val.email +'</td>';               
  content += '<td><button  onclick="Update_State()"> edit</button></td>';
  content += '<td><button  > save </button></td>';
  content += '</tr>';
});
$('#tablel').append(content);

})

function Update_State(){

}

Answer 1

This is a multi-step process:

1. Add the key of the item to each row that you generate.
2. Use that key when the user clicks the button to update the correct node.

The first step requires a change to your existing content generation script:

var ref = firebase.database().ref("Puser");

ref.on('value',function(snapshot){
  var content ='';
  snapshot.forEach(function(data){
    var key = data.key;
    var val = data.val();
    content += `<tr id="'+key+'">`;
    content += '<td>' + val.email +'</td>';
    content += '<td>' + val.email +'</td>';               
    content += '<td><button  onclick="Update_State(\''+key+'\')"> edit</button></td>';
    content += '<td><button  > save </button></td>';
    content += '</tr>';
  });
  $('#tablel').append(content);
})

As you may see, I made a few more changes to your code:

1. Indent each level properly, which helps enormously in making your code readable. This alone makes it more likely that you spot problems in it, and also makes it more likely that someone here may help.
2. Get the key of each child node, and then add that to the row, and also to the onclick hander. Only one or the other is needed, but I felt more comfortable doing both. ¯_(ツ)_/¯
3. Use `` instead of append , as otherwise you keep adding more and more rows as someone makes a change to one of the rows.

Now with that out of the way, you can use the key in the Update_State function to call the database on the correct child node:

function Update_State(key){
  console.log(key);
  var ref = firebase.database().ref("Puser");
  ref.child(key).update({ property: "value" });
}