Question

我遇到麻烦似乎应该很简单。我想删除从Firebase保存数据的HTML表格中的整行。我已经能够从delete_row函数中单击“删除”删除用户的整个Firebase父节点，但我只想删除单击删除按钮的行。提前致谢！

//表

<table style="width:100%">
<tr>
<td>Id: </td>
<td><input type="text" name="id" id="user_id" /></td>
</tr>
<tr>
<td>Place Name: </td>
<td><input type="text" name="user_name" id="user_name" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Add Place" onclick="create_row();" />
<input type="button" value="Delete" onclick="delete_row();" />
</td>
</tr>
</table>

<table id="tbl_users_list" border="1">
<tr>
<td>#Id</td>
<td>PLACE NAME</td> 
</tr>   
</table>

//用于创建和删除行的脚本

<script>
var tblUsers = document.getElementById("tbl_users_list");
// firebase reference
var database = firebase.database().ref('users/');
var rowIndex = 1;

 database.once('value', function(snapshot) {
 snapshot.forEach(function(childSnapshot) {
 var childKey = childSnapshot.key;
 var childData = childSnapshot.val();

 var row = tblUsers.insertRow(rowIndex);
 var cellId = row.insertCell(0);
 var cellName = row.insertCell(1);
 var cellButtons = row.insertCell(2).outerHTML="<tr id='row"+rowIndex+"'><td><input type='button' value='Delete' class='delete' onclick='delete_row()'></td></tr>";                                   

 cellId.appendChild(document.createTextNode(childKey));                                
 cellName.appendChild(document.createTextNode(childData.user_name)); 
 rowIndex = rowIndex + 1;                               
 });
 });

function create_row() {
var user_name = document.getElementById('user_name').value;
var uid = firebase.database().ref().child('users').push().key;

var data = {
user_id: uid,
user_name: user_name
}

var updates = {};
updates['/users/' + uid] = data;
firebase.database().ref().update(updates);

alert('the user was created successfully');
reload_page();   
}

function delete_row() { 
var key = document.getElementById(row).row.childData;

firebase.database().ref().child('users/' + row + '/').remove();
alert('row was removed');
reload_page();
}

function reload_page() { 
window.location.reload();     
}

</script>

Answer 1

您可以将childKey传递给delete_row()方法。这样，您可以告诉Firebase要删除哪个节点：

 database.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        var childKey = childSnapshot.key;
        var childData = childSnapshot.val();

        var row = tblUsers.insertRow(rowIndex);
        var cellId = row.insertCell(0);
        var cellName = row.insertCell(1);
        var cellButtons = row.insertCell(2).outerHTML=
        "<tr id='row"+rowIndex+"'><td><input type='button' value='Delete' class='delete' onclick='delete_row("+childKey+")'></td></tr>";                                   

        cellId.appendChild(document.createTextNode(childKey));                                
        cellName.appendChild(document.createTextNode(childData.user_name)); 
        rowIndex = rowIndex + 1;                               
    });
 });

function delete_row(childKey) { 
    var key = document.getElementById(row).row.childData;

    firebase.database().ref().child('users/' + childKey + '/').remove();
    alert('row was removed');
    reload_page();
}

Answer 2

所以我正面临类似的问题。主要问题是，对于所有删除按钮，都传递相同的键。

userImagesRef1.once("value", function(snapshot) {
  var ParentKey = snapshot.key;
console.log(ParentKey);
  snapshot.forEach(function(childSnapshot) {
      childSnapshot.forEach(function(snap){
        
          childKey = snap.key;
          console.log(childKey);
          // alert("child key" + childKey);
          
          var TenderID = snap.child("TenderID").val();
          console.log(TenderID);

          var NoticeNumber = snap.child("NoticeNumber").val();
          var NameofWork = snap.child("NameofWork").val();
          var pictures = snap.child("pictures").val();
          Link1 = pictures[0];
          console.log(Link1);
          Link2 = pictures[1];
          console.log(pictures[1]);
          var Link3 = pictures[2];
          console.log(Link3)

          if(Link3 == undefined){
              Link3 = " ";
          }
          if(Link3 == null){
              Link3 = " ";
          }
   
          var Service = String(snap.child("Service").val());
          console.log(Service)

          var ts = snap.child("timestamp").val();
          console.log("TS:" + ts);
          var SNo = "";
          var id = snap.child("id").val();
          var Corrigendum = snap.child("Corrigendum").val();
          var State = snap.child("Status").val();
          var StartDate = snap.child("StartDate").val();
          var EndDate = snap.child("EndDate").val();
          var Remarks = snap.child("Remarks").val();

          $("#tableBody").append("<tr><td>"+ SNo +"</td><td>"+ id +"</td><td><p>"+TenderID+"</p><p><a href = '" + Link1+"'>" +NoticeNumber+"</p></td>"+"<td>" +NameofWork+"</td><td>" + StartDate + "</td><td>"+EndDate+"</td><td>" + Corrigendum + "</td> <td><a href = '" +Link2+ "'>" +Remarks+"</a></td><td>"+ State +"'<input type='button' value='Delete' class='delete' onclick='delete_row(childKey)'>"+"</td></tr>" );
          
 
      })
  });
  }); 
   function delete_row(childKey) { 
    // var key = document.getElementById(row).row.childData;
    // alert("12232");
    alert(childKey);
    firebase.database().ref().child('user-images/' + childKey + '/').remove();
    alert('row was removed');
    // reload_page();
  }

删除按钮以删除整行Firebase数据

2 个答案: