关闭对话框时如何清除对话框中的表格 [英] How to clear table inside a dialog when dialog is closed

问题描述

点击按钮后，会添加2组数据。我使用材料设计。

按钮需要2次点击才能第一次运行功能。由于这一点，数据被添加到表2次。

代码

HTML

 < button onclick =purchaseList（orderid）id =dialog> Button< / button> 
  

JS

  function popup（listid）{
 
 var starCountRef = firebase.database（）。ref（'Orders /'+ 
 listid）.child（'foodItems'）; 
 starCountRef.on（'child_added'，snapshot => {
 
 var snaps = snapshot.val（）; 
 var itemPrice = snaps.price; 
 var itemName = snaps.productName; 
 var itemQuantity = snaps.quantity; 
 $ b console.log（itemName）; 
 $（＃producttable）。append（
 '< td class =mdl-data-table__cell  -  non-numeric>'+ itemName + 
'< / td>< td>'+ itemQuantity +'< td>< td>'+ itemPrice +'< / td>< / tr>'
）; 
}）; 
 
 var dialog = document.querySelector（'dialog'）; 
 var showDialogBu​​tton = document.querySelector（'＃dialog'）; 
 if（！dialog.showModal）{
 dialogPolyfill.registerDialog（dialog）; 
 
 showDialogBu​​tton.addEventListener（'click'，function（）{
 
 
 dialog.showModal（）; 
 
}）; 
 dialog.querySelector（'。close'）。addEventListener（'click'，function（）{
 
 var element = document.getElementById（producttable）
 while（element .lastChild）{
 element.removeChild（element.lastChild）; 
} 
 dialog.close（）; 
 
}）; 
 
 
 
 
解决方案
工作：
 
 
  var element = document.getElementById（producttable）
 while（element.lastChild）{
 element.removeChild（element.lastChild）; 
} 
  
根据需要添加。
 
When the button is clicked, 2 sets data is added. I use material design.

Button needs 2 clicks to run function for first time. Due to this, the data is added to table 2 times.

Code

HTML
<button onclick="purchaseList(orderid)" id="dialog">Button</button>
JS
function popup(listid) {

    var starCountRef = firebase.database().ref('Orders/' +
        listid).child('foodItems');
    starCountRef.on('child_added', snapshot => {

        var snaps = snapshot.val();
        var itemPrice = snaps.price;
        var itemName = snaps.productName;
        var itemQuantity = snaps.quantity;

        console.log(itemName);
        $("#producttable").append(
            '<tr><td class="mdl-data-table__cell--non-numeric">' + itemName +
            '</td><td>' + itemQuantity + '</td><td>' + itemPrice + '</td></tr>'
        );
    });

    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#dialog');
    if (!dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {


        dialog.showModal();

    });
    dialog.querySelector('.close').addEventListener('click', function() {

        var element = document.getElementById("producttable")
        while (element.lastChild) {
            element.removeChild(element.lastChild);
        }
        dialog.close();

    });

}

解决方案
This should work:
var element = document.getElementById("producttable")
while (element.lastChild) {
    element.removeChild(element.lastChild);
}
Add this as necessary.

                        
这篇关于关闭对话框时如何清除对话框中的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！