时间戳

首页 > 解决方案 > 使用firebase编辑表格行javascript

javascript - 使用firebase编辑表格行javascript

问题描述

我有一个表格，它是通过 Firebase 动态增加的，我需要在表格的每一行上都有一个编辑按钮。我在使用编辑按钮时遇到问题，如何根据每个用户的 id 更新数据并保存此更新，然后显示带有更新的表格。

      <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(){

}

标签： javascriptfirebase-realtime-database

解决方案

这是一个多步骤的过程：

  1. 将项目的键添加到您生成的每一行。
  2. 当用户单击按钮更新正确的节点时使用该键。

第一步需要更改您现有的内容生成脚本：

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);
})

如您所见，我对您的代码进行了更多更改：

  1. 正确缩进每个级别，这极大地有助于使您的代码具有可读性。仅此一项就使您更有可能发现其中的问题，也使这里的某人更有可能提供帮助。
  2. 获取每个子节点的键，然后将其添加到行和处理程序中onclick。只需要一个或另一个，但我觉得两者都做起来更舒服。¯_(ツ)_/¯
  3. 使用 `` 而不是append，否则当有人对其中一行进行更改时，您会不断添加越来越多的行。

现在，您可以使用Update_State函数中的键在正确的子节点上调用数据库：

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

推荐阅读