如何获取 firebase html 表中的当前行 ID 以执行函数

框架

这是我的代码,它的作用是从 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 设置一个与当前行变量一起使用的函数

哈里什

您可以使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章