Блог

При обычном извлечении данных html фактически сохранялся в html-файле, но в моем случае я создаю html-элемент внутри jquery, тогда как я вызывал идентификатор div?

как заменить document.getElementById («edit»).innerHTML= …. который идентификатор элемента на самом деле находится не внутри html, а внутри jquery.

Таблица, которую я создал во внутреннем HTML, — это только заголовок, который является (USER, EMAIL, USERTYPE, EDIT, DELETE). Все данные фактически извлекались из (User до тех пор, пока usertype не был фактически извлечен из firebase. Затем я пытаюсь добавить в него кнопку редактирования и удаления. какой код показан, как показано ниже:

 \Code that use to create table and the data is retrieve from firebase
firebase.database().ref("users").orderByKey().once("value").then(function (snapshot) {
             var counter = 0;
        snapshot.forEach(function(childSnapshot) {
            counter =1;
            var user = childSnapshot.ref.getKey();
            var email = childSnapshot.child("email").val();
            var usertype = childSnapshot.child("usertype").val();
            //the edit was I trying to change the div 'id' into the specific user that get from firebase by row of data and use it as unique id to call the data into the form.

             var edit = user;
             $(".edit").attr("id",edit);
                    
   
        $("#table_body1").append('<tr><td>'   counter   '</td> <td>'   user   '</td> <td>'   email  '</td> <td>'   usertype    '</td> <td>'   `<div class="Edit" name="edit" onclick="div_show()"><img src = "edit.png"></div>` '</td> <td>'   `<div class="Edit" name="delete" onclick="delete_show()"><img src = "delete.png"></div>`   '</td> </tr>');           
      });                

});


function div_show() {
document.getElementById('abc').style.display = "block";

              var  user= document.getElementsById("edit");

      var firebase = 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;
                    
                })
            }
 

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: check_empty()" id="update">Update</a>
<a href="javascript: check_empty()" id="cancel" onclick ="div_hide()">Cancel</a>
</form>
</div>
 

Не рекомендуется использовать встроенные обработчики событий, ОСОБЕННО если у вас очень простое делегирование событий в jQuery. Чтобы отредактировать / удалить строку, вы должны сделать

 $("#table_body1").on("click",".edit",function() { div_show(this.dataset.user) }); // pass something that identifies the row 
$("#table_body1").on("click",".delete",function() { $(this).closest("tr").remove() }) 
 

где кнопка, которую вы добавляете, имеет class="delete"

 $("#table_body1").append(
  `<tr>
    <td>${counter}</td>
    <td>${user}</td> 
    <td>${email}</td> 
    <td>${usertype}</td> 
    <td class="edit" data-user="${user}"><img src="edit.png"></td> 
    <td class="delete"><img src="delete.png"></td> 
  </tr>`);