如何从已从 firebase 检索并放入表单的表中获取特定数据值答案

【问题标题】：How to get the specific data value from the table that has retrieve from firebase and put inside a form如何从已从 firebase 检索并放入表单的表中获取特定数据值
【发布时间】：2021-01-16 16:51:14
【问题描述】：

我可以知道如何从 HTML 表中检索数据，而数据值实际上是从 firebase 中检索的。

场景：当我需要编辑第一行数据（user1，timmyscottmy@gmail.com，lecturer）时，我只需点击第一行内的编辑按钮。然后，它会提示一个表单，显示为https://i.stack.imgur.com/AVzSg.png ，我打算获取具体的数据，例如，当我点击表单内第一行数据的编辑按钮时，它只会在表单中追加第一行数据，输入占位符的HTML表单将显示当前具体数据的行数据。例如，在表单中，当我单击电子邮件的输入字段时，占位符会显示当前数据是 timmyscottmy@gmail.com。

1:https://i.stack.imgur.com/lXSfP.png

2:https://i.stack.imgur.com/AVzSg.png

3:https://i.stack.imgur.com/IDOCS.png

HTML 代码：


    <div id="abc">
        <!-- Popup Div Starts Here -->
    <div id="popupContact">
        <!-- Contact Us Form -->
    <form action="#" id="form" method="post" name="form">
    <img id="close" src="images/3.png" onclick ="div_hide()">
    <h2 >Edit</h2>
    <hr>
    <input id="userID" name="UserID" placeholder="User = user1" type="text">
    <input id="email" name="email" placeholder="Email = timmyscottmy@gmail.com" type="text">
    <input id="usertype" name="usertype" placeholder="User type = lecturer" type="text">
    <a href="javascript:%20check_empty()" id="update">Update</a>
    <a href="javascript:%20check_empty()" id="cancel" onclick ="div_hide()">Cancel</a>
    </form>
    </div>
    <script src="form.js"></script>

javascript 中的代码 = form.js

firebase.database().ref("users").orderByKey().once("value").then(function (snapshot) {
        snapshot.forEach(function(childSnapshot) {
            
            var user = childSnapshot.ref.getKey();
            var email = childSnapshot.child("email").val();
            var usertype = childSnapshot.child("usertype").val();
   
        $("#table_body1").append('<tr><td>' + user  +'</td> <td>' + email +'</td> <td>' 
         + usertype   +'</td> <td>' + `<div class="Edit" onclick="div_show()"><img src = 
        "edit.png"></div>`+'</td> <td>' + `<div class="Edit" onclick="delete_show()">. 
          <img src = "delete.png"></div>` + '</td> </tr>');           
          });                

});

//ref.getKey() to get the users
//childSnapshot.ref.getKey(); to get the user1,user2, user3

// Validating Empty Field
function check_empty() {
    if (document.getElementById('userId').value == "" || document.getElementById('email').value == "" || document.getElementById('usertype').value ==  "") {
        alert("Fill All Fields !");
    } else {
        document.getElementById('form').submit();
        alert("Form Submitted Successfully...");
    }
}
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";

                var user = document.getElementById("user").value;

                firebase.database().ref('users/'+user).once('value').then(function (snapshot){
                    var email = snapshot.val().email;
                    var usertype = snapshot.val().usertype;
           
                    document.getElementById("email").innerHTML=email;
                    document.getElementById("usertype").innerHTML=usertype;
                    
                  // var email = childSnapshot.child("email").val();
           // var usertype = childSnapshot.child("usertype").val();  
                    
                })
            }
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}

【问题讨论】：

标签： javascript html jquery firebase-realtime-database

【解决方案1】：

由于您的数据条目似乎没有任何唯一 ID，因为您甚至可以将“user1”更改为您想要的任何内容，我在类似情况下所做的是将他们更改的数据保存到表中，然后只需将整个表逐行更新到 firebase 中，而不是试图寻找一个数据点来更改。

为了更好的用户体验，我建议使用您的编辑表单并将占位符替换为输入的实际值，这样您的用户就不需要重新输入整个字段，以防他们只想更改一件事。

【讨论】：