如何獲取 firebase html 表中的當前行 ID 以執行函數

Question

這是我的代碼，它的作用是從 firebase 數據庫中檢索數據並使用 javascript（加上一個小的 jquery 東西）將其顯示在 HTML 表中

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

情況是我想放置一個操作按鈕“onclick”來更新數據庫中的一行。

這是我的表的樣子： 我不知道如何在這種類型的表中使用 firebase 設置一個與當前行變量一起使用的函數

Answer 1

您可以使用每條記錄的key來獲取特定的行 ID，將其傳遞給操作按鈕的onclick 。 你可以試試這樣的

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