如何更新 html 表中的 firebase 数据库数据？答案

【问题标题】：How to update firebase database data in html table?如何更新 html 表中的 firebase 数据库数据？
【发布时间】：2019-01-29 00:52:15
【问题描述】：

我已经在 HTML 表格中显示了 firebase 数据库数据

现在我想单击 HTML 表中的“批准”按钮以更新状态以进行批准。（点击第一行，只更新第一条数据）

这是我所做的按钮的代码，但我无法按我的意愿工作。

function ButtonApproveClick(){
    var req = document.getElementById('Users');
    var dbRefReq = firebase.database().ref().child('Users')
    dbRefReq.once("child_added", function(snapshot ) {
        snapshot.ref.update({ statuss: "valid" })
    });
}

这是我的数据库的样子：[Firebase 数据库]

谁能帮我解决问题......

(function() {

var config = {


  apiKey: "AIzaSyDwrBm054kYrvm-6hZg3Ve_I0Rgp4MfOGo",
  authDomain: "petservice-f7559.firebaseapp.com",
  databaseURL: "https://petservice-f7559.firebaseio.com",
  projectId: "petservice-f7559",
  storageBucket: "petservice-f7559.appspot.com",
  messagingSenderId: "390073142865"
};
firebase.initializeApp(config);

  const req = document.getElementById('Users');

  const dbRefReq = firebase.database().ref().child('Users')

  dbRefReq.on('child_added', snap => {


      var name = snap.child("name").val();
      var phone = snap.child("phone").val();
      var statuss = snap.child("statuss").val();
      var icurl = snap.child("icurl").val();
      var userid = snap.child("userid").val();


$("#table_body").append("<tr><td>"+name+" </td><td>"+phone+"</td><td>"+ statuss+ "</td> <td><image src="+icurl+" alt=Trulli width=200 height=200> </image></td><td><button onclick='App()' dataid ="+userid+">Approve </button></td><td><button onclick='Dis()'>Remove</button></td></tr>");

  });

  }());



function App(){
 firebase.database().ref().child('Users').child(dataid).update({ statuss: "valid" })
}

function Dis(){

    alert("Hi2");

}

body {
  background: #fff;
  padding: 0px;
  margin: 0px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
}

input, button {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.main-div, .loggedin-div {
  width: 20%;
  margin: 0px auto;
  margin-top: 150px;
  padding: 20px;
  display: none;
}

.main-div input {
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div input:focus {
  border: 1px solid #777;
}

.main-div button, .loggedin-div button {
  background: #5d8ffc;
  color: #fff;
  border: 1px solid #5d8ffc;
  border-radius: 5px;
  padding: 15px;
  display: block;
  width: 100%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div button:hover, .loggedin-div button:hover {
  background: #fff;
  color: #5d8ffc;
  border: 1px solid #5d8ffc;
  cursor: pointer;
}

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

<html>


<head>
  <script>
  $(document).ready(function(){
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#A").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
  </script>

  <title>Firebase Login</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">

  <link rel="stylesheet" href="style.css" />
</head>
<body>


<h1>HI</h1>
<input id="myInput" type="text" placeholder="Search..">

<div class="mainDiv" align="left">
  <h1>ALL User</h>
    <table >
      <thead>
        <tr>
          <td>Name</td>
          <td>Phone</td>
          <td>Status</td>
          <td>Url</td>
            <td>Approve</td>
              <td>Disapprove</td>
        </tr>
      </thead>

      <tbody id="table_body">


      </tbody>

    </table>
  </div>



  <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>

          <script src="https://code.jquery.com/jquery-3.1.0.js"></script>


  <script src="view.js"></script>

</body>
</html>

【问题讨论】：

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

这是一个三步过程。由于您没有共享整个代码/HTML，因此我只会为您提供所需的步骤：

确保ButtonApproveClick 知道用户单击了哪个特定按钮。
然后找到该行中子节点的 Firebase 键/ID（通常通过将该键/ID 存储在该行的 id 属性中）。
最后将密钥/ID 传递给数据库调用以更新：firebase.database().ref().child('Users').child(keyOfUserThatWasClicked).update({ statuss: "valid" })。这里不需要once() 监听器。

一个如何呈现用户的简单示例：

firebase.database().ref().child('Users').on('value', function(snapshot) {
  snapshot.forEach(function(userSnapshot) {
    var tr = document.createElement('tr');
    tr.id = userSnapshot.key;
    // TODO: populate the rest of the row and add it to the table
});

然后您可能会获得用户点击的行的 ID：

function ButtonApproveClick(e){
    var button = e.target;
    var tr = e.parentElement.parentElement; // might need more or fewer to reach the right/TR element in the HTML
    var key = tr.id;
    firebase.database().ref().child('Users').child(key).update({ statuss: "valid" })
}

【讨论】：

我更改了一点代码，现在我已经将用户 ID 保存在数据库中，现在想在用户单击按钮时获取 ID。