Firebase удаляет всю строку с помощью кнопки JavaScript - PullRequest
Новая
       6

Firebase удаляет всю строку с помощью кнопки JavaScript

0 голосов
/ 04 марта 2020

The 'Delete' Button used to REMOVE the entire row

Я использую HTML и JavaScript для разработки простой веб-страницы CRUD, и данные хранятся в базе данных Firebase Realtime. Я успешно перенес все данные из Firebase в таблицу HTML. Теперь проблема в том, что я хочу иметь функцию, в которой я могу просто удалить ребенка, нажав кнопку «Удалить». Я получаю эту ошибку:

Uncaught ReferenceError: M1adl3vYm0j1Dvcj43R не определен в HTMLInputElement.onclick (тест. 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>

1 Ответ

0 голосов
/ 04 марта 2020

При создании разметки для вашей кнопки вам нужно заключить переменную 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>`;
...