如何从 html 表中更新和删除 firebase 数据

Question

我想更新和删除已经从 html 表格视图中检索到的数据。我尝试以下代码，但 onClick 功能不起作用。

var rootRef = firebase.database().ref().child("products");  //Read data to show in table format
    rootRef.on("child_added", snap => {
    var key = snap.key;
    var description = snap.child("description").val();
    var image = snap.child("image").val();

    $("#table_body").append("<tr id='"+snap.key+"'><td>"+ key +"</td><td>" + description + "</td><td>" + image 
                            +"</td><td><button onclick='"+updateData()+"'>Update</button></td><td>"
                            +"</td><td><button onclick='"+deleteData()+"'>Delete</button></td><td>"
                            +"</td></tr>");
    });

表格显示完美，但按钮不起作用。我附上一张图片来清除我的问题。

如何使用表更新和删除 Firebase 数据。我想提示一个对话框来更新和删除特定的数据，但是我该怎么做呢？

Answer 1

您需要将与表格行对应的快照的key（即snap.key）传递给您的updateData()和deleteData()函数，如下所示：

  var rootRef = firebase.database().ref().child('products'); //Read data to show in table format
  rootRef.on('child_added', (snap) => {
    
    var key = snap.key;
    var description = snap.child('description').val();
    var image = snap.child('image').val();

    $('#table_body').append(
      "<tr id='" +
        snap.key +
        "'><td>" +
        key +
        '</td><td>' +
        description +
        '</td><td>' +
        image +
        "</td><td><button onclick=updateData('" +
        snap.key +
        "')>Update</button></td><td>" +
        "</td><td><button onclick=deleteData('" +
        snap.key +
        "')>Delete</button></td><td>" +
        '</td></tr>'
    );
  });

  function deleteData(key) {
    rootRef
      .child(key)
      .remove()
      .then(function () {
        console.log('Remove succeeded.');
      })
      .catch(function (error) {
        console.log('Remove failed: ' + error.message);
      });
  }

  function updateData(key) {
    rootRef
      .child(key)
      .update({ foo: 'bar' })
      .then(function () {
        // ...
      })
      .catch(function (error) {
        // ...
      });
  }

---

请注意，当您删除一行时，您的前端不会更新，因为您使用了 'child_added' 事件。