【发布时间】:2018-01-13 11:03:35
【问题描述】:
<table>
<tr>
<td>Name: </td>
<td><input type="text" name="user_name" id="user_name" /></td>
</tr>
<tr>
<td>Phone: </td>
<td><input type="text" name="user_phone" id="user_phone" /></td>
</tr>
<tr>
<td>Address </td>
<td><select name="user_ads" id="user_ads">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<tr>
<td colspan="2">
<input type="button" value="Save" onclick="save_user();" />
<input type="button" value="Update" onclick="update_user();" />
</td>
</tr>
</table>
<table id="users_list" border="1">
<tr>
<td>NAME</td>
<td>PHONE</td>
<td>ADDRESS</td>
<td>ACTION</td>
</tr>
</table>
var usersList = document.getElementById('users_list');
var databaseRef = firebase.database().ref('users/');
var rowIndex = 1;
databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var button = document.createElement("button");
var button2 = document.createElement("button");
button.innerHTML = "Edit";
button2.innerHTML = "Delete";
var row = usersList.insertRow(rowIndex);
var cellName = row.insertCell(0);
var cellPhone = row.insertCell(1);
var cellAddress = row.insertCell(2);
var cellButton = row.insertCell(3);
cellName.appendChild(document.createTextNode(childData.name));
cellPhone.appendChild(document.createTextNode(childData.phone));
cellAddress.appendChild(document.createTextNode(childData.address));
cellButton.appendChild(button);
cellButton.appendChild(button2);
button.onclick = delete;
button2.onclick = edit;
rowIndex = rowIndex + 1;
});
});
function delete(){
var row = document.getElementById("users_list");
firebase.database().ref().child('/users/' + user_id).remove();
alert('The user is deleted successfully!');
reload_page();
}
function edit {
}
function update_user(){
var data = {
user_id: user_id,
user_name: user_name
}
var updates = {};
updates['/users/' + user_id] = data;
firebase.database().ref().update(updates);
alert('The user is updated successfully!');
reload_page();
}
</script>
我在 firebase 中创建了一个名为 users 的数据库,其中包含数据存储名称、电话和地址。我已经从表中的 firebase 检索数据,并在表中创建了一个带有编辑按钮和删除按钮的新列。我应该在删除功能中添加什么,以便在单击按钮删除时删除行中的 firebase 数据,当单击行中的编辑按钮时,它会将行中的 firebase 数据检索到表格表单中,然后单击更新以更新firebase 中的数据。
类似的输出:
【问题讨论】:
标签: javascript html firebase firebase-realtime-database