How can I get the current row ID in a firebase html table to execute a function

Question

Here's my code and what it does is that it retrieves data from firebase database and display it in a HTML Table using javascript (plus a small jquery thingy)

<table class="table" id="ex-table">
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Prénom</th>
      <th scope="col">N° CIN</th>
      <th scope="col">Tel</th>
      <th scope="col">Position</th>
      <th scope="col">Photo d'accident</th>
      <th scope="col">Etat</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
<tbody>
          <script>
      var database = firebase.database();
      database.ref('declaration').once('value', function(snapshot) {
        if (snapshot.exists()) {
          var content = '';
          snapshot.forEach(function(data) {
            var val = data.val();
            content += '<tr>';
            content += '<td>' + val.firstName + '</td>';
            content += '<td>' + val.lastName + '</td>';
            content += '<td>' + val.cin + '</td>';
            content += '<td> 1234 </td>';
            content += '<td> lng lat </td>';
            content += '<td>' + val.photo + '</td>';
            content += '<td>' + val.etat + '</td>';
            content += '<td> ACTION BUTTON TO THESE VARIABLES IN THIS ROW </td>';
            content += '</tr>';
          });
          $('#ex-table').append(content);
        }
      });
    </script>
  </tbody>
</table>

The case is that I want to put an action button 'onclick' to update a row in the database.

This is what my table looks like: I don't know how to set a function that works with the current row variables with firebase in this type of table

Answer 1

you can use the key of each record to get particular row id, pass the same to onclick of action button. You can try something like this

 <script>
    function actionCb(e){
        console.log('e',e.id)
     }
</script>

<table class="table" id="ex-table">
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Prénom</th>
      <th scope="col">N° CIN</th>
      <th scope="col">Tel</th>
      <th scope="col">Position</th>
      <th scope="col">Photo d'accident</th>
      <th scope="col">Etat</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
<tbody>
          <script>
      var database = firebase.database();
      database.ref('declaration').once('value', function(snapshot) {

        if (snapshot.exists()) {
          var content = '';
          var snapValues = snapshot.val()
          var values = Object.keys(snapValues).map(function(key){ return {key, ...snapValues[key]}})
          values.forEach(function(data) {
            var val = data; 
            var fbKey = data.key
            content += '<tr>';
            content += '<td>' + val.firstName + '</td>';
            content += '<td>' + val.lastName + '</td>';
            content += '<td>' + val.cin + '</td>';
            content += '<td> 1234 </td>';
            content += '<td> lng lat </td>';
            content += '<td>' + val.photo + '</td>';
            content += '<td>' + val.etat + '</td>';
            content += '<td> <button id="'+ fbKey+'" onclick="actionCb(this)">action</button> </td>';
            content += '</tr>';
          });
          $('#ex-table').append(content);
        }
      });
    </script>
  </tbody>
</table>