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

我想知道如何从HTML表中检索数据，该表的数据值实际上是从firebase检索的

情景： 当我需要编辑第一行数据（user1，timmyscottmy@gmail.com，讲师），我只需单击第一行内的编辑按钮。然后，它将提示显示一个表单，如中所示，我计划获取特定数据例如，当我从表单内的第一行数据中单击编辑按钮时，它只会在表单中附加第一行数据，HTML表单的输入占位符将显示当前特定的数据行数据。例如，当我在表单中单击电子邮件的输入字段时，占位符将显示当前数据为timmyscottmy@gmail.com.

:

:

:

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";
}

firebase.database（）.ref（“用户”）.orderByKey（）.one（“值”）.then（函数（快照）{
snapshot.forEach（函数（childSnapshot）{
var user=childSnapshot.ref.getKey（）；
var email=childSnapshot.child（“email”）.val（）；
var usertype=childSnapshot.child（“usertype”）.val（）；
$（“#表#1”）。附加（“”+用户+“”+电子邮件+“”）
+用户类型+''++'+'+'`。
` + ' ');           
});                
});
//ref.getKey（）以获取用户
//childSnapshot.ref.getKey（）；要获取user1、user2、user3
//验证空字段
函数检查_empty（）{
if（document.getElementById（'userId'）。value==“document.getElementById（'email'）。value==“document.getElementById（'usertype'）。value==”）{
警报（“填写所有字段！”）；
}否则{
document.getElementById（'form'）.submit（）；
警报（“表单已成功提交…”）；
}
}
//显示弹出窗口的函数
函数div_show（）{
document.getElementById（'abc'）.style.display=“block”；
var user=document.getElementById（“用户”）.value；
firebase.database（）.ref（'users/'+user.）。一次（'value'）。然后（函数（快照）{
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（）；
})
}
//隐藏弹出窗口的函数
函数div_hide（）{
document.getElementById（'abc'）.style.display=“无”；
}

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

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