Firebase 使用 JavaScript 按钮删除整行

Question

我正在使用 HTML 和 JavaScript 开发一个简单的 CRUD 网页，数据存储在 Firebase 实时数据库中。我已成功将 Firebase 中的所有数据制成 HTML 表格。现在的问题是我想要一个功能，我可以通过单击“删除”按钮简单地删除一个孩子。我不断收到此错误：

未捕获的 ReferenceError：M1adl3vYm0j1Dvcj43R 未在 HTMLInputElement.onclick (test.html:1) 中定义

请帮助我。谢谢。这是我的代码：

HTML：

<table>
            <tr>
                <td>ID:</td>
                <td><input type="text" name="id" id="user_id"></td>
            </tr>
            <tr>
                <td>User Name:</td>
                <td><input type="text" name="user_name" id="user_name"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="Save" onclick="save_user();"/>
                    <input type="button" value="Update" onclick="update_user();" />
                    <input type="button" value="Delete" onclick="delete_user();" />
                </td>
            </tr>
        </table>

        <h3>Users List</h3>

        <table id="tbl_users_list" border="1">
            <tr>
                <td>ID</td>
                <td>NAME</td>
                <td>ACTION</td>
            </tr>
        </table>

脚本：

 <script>

           var tblUsers = document.getElementById('tbl_users_list');
           var databaseRef = database.ref('users/');
           var rowIndex = 1;

           databaseRef.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 third = row.insertCell(2);
            third.outerHTML="<tr id='row"+rowIndex+"'><td><input type='button' value='Delete' class='delete' onclick='delete_user("+childKey+")'></td></tr>";   


            cellId.appendChild(document.createTextNode(childKey));
            cellName.appendChild(document.createTextNode(childData.user_name));

            rowIndex = rowIndex+1;

  });
});


            function save_user(){
                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 is created successfully!');
                reload_page();
            }


            function update_user(){
                var user_name = document.getElementById('user_name').value;
                var user_id = document.getElementById('user_id').value;

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

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

                alert('The user is updated successfully!');
                reload_page();

            }

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

                firebase.database().ref().child('users/'+ childKey+'/').remove();
                alert('The user is deleted successfully!');
                reload_page();
            }

            function reload_page(){
                window.location.reload();
            }
        </script>

Answer 1

为您的按钮创建标记时，您需要将 childKey 变量用引号括起来。

third.outerHTML="<tr id='row"+rowIndex+"'><td><input type='button' value='Delete' class='delete' onclick='delete_user(\""+childKey+"\")'></td></tr>";

或

third.outerHTML=`<tr id='row${rowIndex}'><td><input type='button' value='Delete' class='delete' onclick='delete_user("${childKey}")'></td></tr>`;