javascript - 如何从 html 表中更新和删除 firebase 数据
问题描述
我想更新和删除已经从 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 数据。我想提示一个对话框来更新和删除特定数据,但我该怎么做呢?
解决方案
您需要将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”事件。
推荐阅读
- hyperledger-fabric - HL Fabric - 状态、事务但不同的键
- scala - Spark Scala 余弦相似度矩阵
- corda - 即使类星体文件在目录中,FlowTests 也会出错
- ios - tvOS - 嵌套的 CollectionView 没有正确聚焦
- nginx - 在 Raspberry Pi 上使用 SSE 和 nginx 服务器
- docker - 使用 swarm 启动 docker 容器,而不在容器名称后附加随机 slug
- php - 使用公共函数类将日期/时间输入数据库的问题
- c - fscanf() != EOF 作为循环的退出条件在错误的时间退出
- python - 电报机器人没有打印任何东西
- timescaledb - 如何更改块时间间隔?