Question

当我单击右侧的img时，我不知道如何删除特定记录

我希望它像这样工作：

我还放置了img来删除特定记录，但是我不知道如何在JS中的img上添加事件侦听器以删除行和记录。另外，当我在数据库中插入数据时，我会添加特定对象的UID以进行删除。

HTML代码

<html>
    <head>
        <title>Fall-App Admin Panel</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <LINK rel="stylesheet" href="style.css" type="text/css" media="all">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
    </head>

    <body>
        <div class="cabecera">

        </div>

        <div class="cuerpo">
            <div class="botones">
                <table style="background-color:grey;height:100%; width:99%" border="10" id="logout">
                    <tr><td><a href="socialServices.html">Επεξεργασία Κοινωνικών Υπηρεσιών</a></td></tr>
                    <tr><td><a href="index.html"id="logout">Αποσύνδεση</a></td></tr>
                </table>

            </div>

            <div class="welcome">
                <div class="container">
                    <!--<form>
                        <input class="input" type="text" id="searchTxt" placeholder="Αναζήτηση για ...">
                        <input class="submit" type="submit" id="searchBtn" value="Εύρεση">
                    </form>-->
                    <input type="text" placeholder="Επιβεβαίωση Κωδικού" name="rePsw" id="rePswReg" required>                           
                    <button type="submit" id="searchBtn">Εγγραφή</button>

                    <table class="searchTable" style="width:100%">
                        <thead>
                          <tr>
                            <td>Name Of Service</td>
                            <td>Address</td> 
                            <td>Postal</td>
                            <td>City</td>
                            <td>Phone</td>
                            <td>Delete</td>
                          </tr>
                        </thead>  
                    <tbody id="tableBody">

                    </tbody>                    
                    </table>
                </div>

                <form id="submitForm">
                 Name Of Service:<br>
                  <input type="text" name="name" id="nameDB"><br>
                  Address:<br>
                  <input type="text" name="address" id="addressDB">
                   Postal:<br>
                  <input type="text" name="postal" id="postalDB">
                   City:<br>
                  <input type="text" name="city" id="cityDB">
                   Phone:<br>
                  <input type="text" name="phone" id="phoneDB">

                   <button type="submit" id="btnInsert">Inster</button>
                </form>

                <script src="registered.js"></script>
            </div>
        </div>

        <div class="pie">

        </div>
    </body>
</html>

JS代码

   (function() {

    //initialize Firebase
    var config = {

    };
    firebase.initializeApp(config);


    const searchBtn = document.getElementById('searchBtn');
    //const searchTxt = document.getElementById('searchTxt');

    var messagesRef2 = firebase.database().ref().child('socialServices');
    var counter=-1;


    //bring all to the table
    var messagesRef2 = firebase.database().ref().child('socialServices');

    messagesRef2.on("child_added", snap =>  {
        counter++;
        var name=snap.child("name").val();
        var address=snap.child("address").val();
        var postal=snap.child("postal").val();
        var city=snap.child("city").val();
        var phone=snap.child("phone").val();

        $("#tableBody").append("<tr><td>" + name + "</td><td>" + address + "</td><td>" + 
                postal + "</td><td>" + city + "</td><td>" + phone + "</td><td>" + "<img src='http://icons.iconarchive.com/icons/hopstarter/button/16/Button-Close-icon.png' id='Img'>" + "</td></tr>");
    });


    //regerence messages collection
    var messagesRef = firebase.database().ref('socialServices');

    //listen for form submit
    document.getElementById('submitForm').addEventListener('submit', submitForm);


    //submit form
    function submitForm(e){
        e.preventDefault();

        //get values
        var name=getInputVal('nameDB');
        var address=getInputVal('addressDB');
        var postal=getInputVal('postalDB');
        var city=getInputVal('cityDB');
        var phone=getInputVal('phoneDB');

        //save message
        saveMessage(name, address, postal, city, phone);    
    }

    //function to get form values
    function getInputVal(id){
        return document.getElementById(id).value;
    }

    //save message to firebase
    function saveMessage(name, address, postal, city, phone){
        var newMessageRef = messagesRef.push();
        newMessageRef.set({
            id: newMessageRef.key,
            name: name,
            address: address,
            postal: postal,
            city: city,
            phone: phone
        });     
    }   

      }());

从表中删除记录（Firebase）

0 个答案: