Редактировать строку таблицы javascript с помощью firebase

Question

У меня есть таблица, которая динамически увеличивается с помощью Firebase, и мне нужна кнопка редактирования в каждой строке таблицы. У меня проблемы с кнопкой редактирования, как я могу обновить данные на основе идентификатора каждого пользователя и сохранить это обновление, а затем отобразить таблицу с обновлением.

      <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

Это многошаговый процесс:

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 Hander. Нужен только один или другой, но мне было удобнее делать оба. ¯_ (ツ) _ / ¯
3. Используйте `` вместо append, так как в противном случае вы продолжаете добавлять все больше и больше строк, когда кто-то вносит изменения в одну из строк.

Теперь вы можете использовать ключ в функции Update_State для вызова базы данных на правильном дочернем узле:

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