Saya membuat serangkaian tabel berdasarkan array javascript dan mengalami masalah besar.

Ini adalah langkah implementasi saya, saya menekan tombol "show top gundam" untuk membuat tabel menggunakan fungsi "createTable". Kemudian saya akan menekan tombol "hapus" untuk menghapus tabel yang tidak saya sukai.

Masalahnya adalah itu benar-benar memulai nama fungsi "removeDiv" dari tombol "hapus" secara otomatis ketika saya menekan tombol "tampilkan gundam atas" untuk membuat tabel. Ide saya adalah bahwa setiap kali saya menekan tombol hapus itu akan didasarkan pada parameter "id" dari setiap div untuk menghapusnya.

Apakah ada cara untuk membuatnya tidak berjalan secara otomatis dan hanya berjalan ketika saya mengklik tombol hapus?

  <body onload="convertXmlToJavaScriptObject()">
    <div style="margin-left: 10px;margin-top: 20px">
        <form action="DispatcherController">
            <input name="btAction" value="Crawl data" type="submit" class="btn-dark" id="crawl" onclick="showLoader()" />
            <input name="btAction" value="Clear all record" type="submit" class="btn-dark" onclick="setZero()" />
            <input name="btAction" value="Show Top Gundam" class="btn-dark" onclick="creatTable()"/>
            <div class="loader" style="margin-top: 10px;display: none" id="loader"></div>
        </form>
        <button class="btn-dark" onclick="">Create table</button>

        <!--Nếu như xóa thành công thì hiện chữ-->
        <c:if test="${requestScope.DELETE>0 or requestScope.DELETE==0}">
            <font style="color: blue" id="del"><p><h5>Xóa thành công</h5></p></font>
            </c:if>
    <!--<input type="submit" value="Click me" class="btn-dark" id="crawl" onclick="showLoader()"/>-->

    <c:set var="gundam" value="${requestScope.FULLLIST}" />


    <!--Mới mở trang lên thì nó sẽ show có tổng cộng có bao nhiêu record-->

    <!--Đây là số record sau khi crawl xong-->
    <c:set var="crawlrecord" value="${requestScope.COUNT}"/>

    <!--Đây là số rerord còn ở trong DB-->
    <c:set var="couting" value="${applicationScope['COUNTRECORD']}"/>

    <div style="margin-top: 20px">
        Tổng số record cào về <p id="record" style="font-weight: bold">${crawlrecord}</p>

    </div> 
    <div><p style="text-align: center">----------------Gundam-------------------</p></div>

    <c:forEach items="${applicationScope.TESTTOP}" var="item">
        <!--                        <div style="width: 600px">
                                    <table style="margin-bottom: 10px;width: 100%">
                                        <tr>
                                            <th style="width: 30%"><img src="${item.avatar}" width="150px"></th>
                                            <th style="width: 70%">
                                                <p>${item.name}<br/>${item.price}<br/>${item.type}</p>
                                                <p><button>Add</button><button style="margin-left: 10px">Remove</button></p>
                                            </th>
                                        </tr>
                                    </table>
                                </div>-->
    </c:forEach>




    <script>
        var array = [];//Tạo 1 array để lưu những gundam object đc chuyển từ hàm convertXmlToJavaScriptObject, thuận tiện cho việc thêm, xóa, sửa

        //        Hàm này có tổng cộng chức năng như sau
        //        1 là nó sẽ show cái loader khi đang crawl
        //        2 là nó sẽ tắt cái chữ delete
        //        3 là nó show số record sau khi crawl xong
        function showLoader() {
            var deleted = document.getElementById("del");
            var x = document.getElementById('loader');
            //Nếu như có danh sách rồi thì tắt cái loader và xóa đi cái chữ "xóa thành công rồi nếu nó có đang hiện"
            //khi nhấn vào nút crawl thì cái loader sẽ hiện
            if (x.style.display === "none") {
                x.style.display = "block";
        <c:set var="couting" value="${requestScope.COUNT}"/>
                document.getElementById("record").innerHTML = "${couting}";
            }
        }
        ;
        //Xóa hết record thì hiện là zero
        function setZero() {
            document.getElementById("record").innerHTML = "0";
            var show = document.getElementById("del");
            if (show.style.display === "none") {
                show.style.display = "block";
            }
        }

        /*
         * Hàm này dùng để convert xml thành javascript object
         * Đã thành công

         * @returns {undefined}             */
        function convertXmlToJavaScriptObject() {

            //Chuyển String thành DOM
            var xmlString = '${applicationScope.TOP}';
            var xmlDOc;

            var paser = new DOMParser();
            var xml = paser.parseFromString(xmlString, "text/xml");


            var path = "/items/item";
            var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
            var result = nodes.iterateNext();//Duyệt từng node đã có đc từ xpath
            while (result) {
                var item = {
                    id: "",
                    name: "",
                    price: "",
                    avatar: "",
                    link: "",
                    type: "",
                    firstDateAppearance: "",
                    numberOfTimeClicked: ""
                };
                item.name = result.getElementsByTagName("name")[0].childNodes[0].nodeValue;//Vì bây h current node là item nên chỉ có duy nhất 1 name node, ta viết thế này sẽ dễ lấy
                item.id = result.getElementsByTagName("id")[0].childNodes[0].nodeValue;
                item.price = result.getElementsByTagName("price")[0].childNodes[0].nodeValue;
                item.avatar = result.getElementsByTagName("avatar")[0].childNodes[0].nodeValue;
                item.link = result.getElementsByTagName("link")[0].childNodes[0].nodeValue;
                item.firstDateAppearance = result.getElementsByTagName("firstDateAppearance")[0].childNodes[0].nodeValue;
                console.log(item.firstDateAppearance);
                item.numberOfTimeClicked = result.getElementsByTagName("numberOfTimeClicked")[0].childNodes[0].nodeValue;

                array.push(item);

                //Đi tới node tiếp theo sau khi duyệt ở node hiện tại
                //Giống như thầy Khánh nói, khi duyệt node thì luôn phải bắt đầu ở ndoe mới 
                result = nodes.iterateNext();
            }
            console.log(array.length);
            for (i = 0; i < array.length; i++) {
                console.log(array[i].name);
            }
        }



        /**
         * functin này sẽ tạo ra 1 cái table
         */
        function creatTable() {
            for (i = 0; i < array.length; i++) {
                //tạo 1 object chứa function


                var body = document.getElementsByTagName('body')[0];
                var div = document.createElement('div');
                div.setAttribute('id', array[i].id);
                div.style.width = "600px";

                //tạo cái table
                var table = document.createElement('table');
                table.style.marginBottom = "10px";
                table.style.width = "100%";
                var tr = document.createElement('tr');


                var firstTh = document.createElement("th");
                firstTh.style.width = "30%";
                var img = document.createElement('img');
                img.setAttribute('width', '150px');
                img.setAttribute('src', array[i].avatar);
                firstTh.appendChild(img);


                //Cái th thứ 2
                var secontTh = document.createElement('th');
                secontTh.style.width = "70%";

                var pFirst = document.createElement('p');
                pFirst.appendChild(document.createTextNode(array[i].name));//Lấy name
                var br = document.createElement('br');
                pFirst.appendChild(br);

                pFirst.appendChild(document.createTextNode(array[i].price));//lấy giá
                var br = document.createElement('br');
                pFirst.appendChild(br);

                pFirst.appendChild(document.createTextNode(array[i].type));//lấy type

                //node p thứ 2
                var pSecond = document.createElement('p');
                var add = document.createElement('button');
                add.setAttribute('class', 'btn-success');
                add.innerHTML = "Add";

                var remove = document.createElement('button');
                remove.innerHTML = "Remove";
                remove.setAttribute('class', 'btn-danger');
                var idNode = array[i].id;
                remove.onclick = function () {
                    removeDiv(idNode)
                };
                remove.style.marginLeft = "10px";

                //tạo ra node id
                var infoId = document.createElement("idnode");
                infoId.appendChild(document.createTextNode(array[i].id));
                infoId.style.display = "none";
                pSecond.appendChild(add);
                pSecond.appendChild(remove);

                //add 2 cái p vào cái th thứ 2
                secontTh.appendChild(pFirst);
                secontTh.appendChild(pSecond);

                tr.appendChild(firstTh);
                tr.appendChild(secontTh);
                table.appendChild(tr);
                div.appendChild(table);
                div.appendChild(infoId);
                body.appendChild(div);
            }

        }

        function tableCreate() {
            var body = document.getElementsByTagName('body')[0];
            var tbl = document.createElement('table');
            tbl.style.width = '100%';
            tbl.setAttribute('border', '1');
            var tbdy = document.createElement('tbody');
            for (var i = 0; i < 3; i++) {
                var tr = document.createElement('tr');
                for (var j = 0; j < 2; j++) {
                    if (i == 2 && j == 1) {
                        break
                    } else {
                        var td = document.createElement('td');
                        td.appendChild(document.createTextNode('\u0020'))
                        i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
                        tr.appendChild(td)
                    }
                }
                tbdy.appendChild(tr);
            }
            tbl.appendChild(tbdy);
            body.appendChild(tbl)
        }




        /**
         * Hàm này dùng để test gửi xmlHttpRequest về để nhận data mà ko cần load trang
         * Đã thành công
         * @returns {undefined}
         */
        function testing() {
            var xmlHttp = new XMLHttpRequest();
            var url = "GetTheTopIDServlet?name=sam";
            var xmlDom;
            xmlHttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {

                    xmlDom = xmlHttp.responseXML;//responseXML là dữ liệu thuộc kiểu XML
                    if (xmlDom != null) {
                        var x = xmlDom.getElementsByTagName("name");
                        console.log(x.length)
                        for (var i = 0; i < x.length; i++) {
                            console.log("Day la value= " + x[i].childNodes[0].nodeValue);
                        }
                    } else {
                        console.log("null bỏ mẹ rùi");
                    }

                }
            };
            xmlHttp.open("GET", url, true);
            xmlHttp.send(null);//Bắt đầu gửi request đi
        }
    </script>
    <script>
        /**
         * Hàm này sẽ remove table mà ta chọn dựa trên id
         * @param {type} id
         * @returns {undefined}
         */
        function removeDiv() {
            console.log("hehe");
        }
    </script>

Perbarui masalah

 var idNode = array[i].id;
    remove.onclick = function () {
     removeDiv(idNode)
  };

Saya dapat menangkap acara secara terpisah tetapi masalah baru adalah bahwa alih-alih mendapatkan id yang benar dari setiap tabel, ia selalu memilih id terakhir yang dihasilkan dari array objek.

1
Nguyen Khac Sam - K11 FUG HCM 11 Maret 2020, 23:36

1 menjawab

Jawaban Terbaik

remove.onclick sedang disetel ke nilai hasil dari eksekusi removeDiv ('()' mengikuti removeDiv), yang kemungkinan tidak terdefinisi. Jadi ketika tombol diklik, javascript mencoba untuk mengeksekusi undefined yang tidak masuk akal.

Sebaliknya, itu harus diatur ke fungsi itu sendiri...

    remove.onclick = removeDiv

Anda juga dapat membungkus removeDiv dalam fungsi anonim jika Anda perlu meneruskannya dengan argumen.

    remove.onclick = function() {
        removeDiv(idNode)
    }
    // OR using ES6 arrow function syntax
    remove.onclick = () => removeDiv(idNode);

Cobalah!

1
Seth Speaks 11 Maret 2020, 21:03