首页 > 解决方案 > 如何使用 HTML 表中的按钮删除 Firebase 数据库中的数据

问题描述

我是使用 Firebase 的 HTML 新手,在我的项目中,我必须使用 HTML 按钮从 Firebase 实时数据库中删除数据。下面是我的代码片段。在脚本部分,有一个 onclick 函数可以在单击时删除数据,但它没有显示任何更改。我需要从相应的按钮中删除行。如何实现它以及我应该使用哪些方法。

    // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        
        // Get a reference to the database service
        var db = firebase.database();

        // get Data

       function SelectAllData(){
            firebase.database().ref('+919512502625').child('S_complain').child('+917226097736').once('value',
            function(AllRecords){
                AllRecords.forEach(
                    function(CurrentRecord){
                        var title = CurrentRecord.val().C_title;
                        var Details = CurrentRecord.val().C_details;
                        var Date = CurrentRecord.val().C_date;
                        var Status = CurrentRecord.val().C_status;
                        var co_id = CurrentRecord.val().C_id;
                        AllItemsToTable(title, Details, Date, Status);
                    }
                );

            });
        }

        window.onload = SelectAllData;

        // fill table
       // var counter = 0;
        function AllItemsToTable(title, Details, Date, Status){
            var tbody = document.getElementById('tablebody');
            var trow = document.createElement('tr');
            var td1 = document.createElement('td');
            //var check = document.createElement('input');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            var td4 = document.createElement('td');
            let del = document.createElement('button');
            

            
            td1.innerHTML = title;
            //check.innerHTML = 'checked';
            td2.innerHTML = Details;
            td3.innerHTML = Date;
            td4.innerHTML = Status;
            del.textContent = 'delete';

            trow.appendChild(td1);
            //trow.appendChild(check);
            trow.appendChild(td2);
            trow.appendChild(td3);
            trow.appendChild(td4);
            trow.appendChild(del);

            tbody.appendChild(trow);

            // Delete data
            
        } 
        var index, table = document.getElementById('tableid');
            for(var i = 0; i < table.rows.length; i++)
            {
                table.rows[i].cells[4].onclick = function()
                {
                
                        index = this.rowIndex;
                        console.log(index);
                    
                    
                };
            } 
              
            document.getElementById('del').onclick = function(){
                AllItemsToTable();
                firebase.database().ref('+917226097736/'+co_id).remove();

            }

       

    </script>

   
</body>
</html>

请赐教。

标签: javascripthtmldatabasefirebasefirebase-realtime-database

解决方案


推荐阅读