JQuery - 单击切换按钮时，附加表会不断增加自身或复制自身答案

【问题标题】：JQuery - Appended Table keeps multiplying itself or duplicating itself when a toggle button is clickedJQuery - 单击切换按钮时，附加表会不断增加自身或复制自身
【发布时间】：2019-11-07 16:14:24
【问题描述】：

我希望用户单击一个按钮以检索一个表，该表在使用 JQuery 的 Ajax 调用单击一个按钮后从 mysql 数据库中获取数据。该表格被附加到一个表格元素，该元素会自行切换以供用户查看，并通过单击按钮再次消失。这是通过下面的代码实现的。但是，每次单击该按钮时，该表格都会自我复制，并在重新出现后添加两 (2) 个额外的副本。这意味着每次单击按钮时，它都会再次将自身附加到表格元素。我希望用户在单击按钮时看到该表一次，并在再次单击同一按钮时再次消失。第三次点击后，应该会重新出现同一个表格，而不是其他表格。

我已经尝试过删除方法。我已经尝试了隐藏和显示方法。

           <HTML>
          <button type = "button" id="allDataTable">Load Stores Table 
          Data</button> 
          <br/>
         <br/>
         <div id="storesT"></div>
         <table class='table table-bordered table-striped' id='station_table'>

         <JQUERY>
         $(document).ready(() => {
         $('#allDataTable').click(()=> {

         $.ajax({
         url:'http://localhost:5000/alldata',
         type:'GET',
      datatype:'json',
      success:(data) => {
      //console.log('You received some', data);
      var station_data ='';

         station_data 

         +='<tr>'+'<th>ID</th>'+'<th>Station</th>'+'<th>Address</th>'+
        '<th>Monthly C-Store Sales</th>'+'<th>Operator</th>'+'<th>Top 
         SKU</th>'+'</tr>'


        $.each(data, function (key,value){
        station_data +='<tr><td>'+value.ID+'</td> 
        <td>'+value.Station+'</td><td>'+value.Address+'</td> 
        <td>'+value.monthly_cstore_sales+'</td><td>'+value.Operator+'</td> 
        <td>'+value.Top_SKU+'</tr></td>';

      });

      $('#station_table').append(station_data);
      //NOT WORKING $('#station_table').remove(station_data);
      //NOT WORKING $('#station_table').hide(station_data);
      //NOT WORKING $('#station_table').show(station_data)
    $('#station_table').toggle(station_data);

      }

       });
      });
    });

【问题讨论】：

你最终得到这个工作了吗？

标签： javascript jquery mysql node.js

【解决方案1】：

一种解决方案是在进行 AJAX 调用之前检查数据是否已添加到 DOM。如果没有，请拨打电话，然后添加数据。如果是，那么只需切换一个类来隐藏/显示表格。

$(document).ready(() => {
         $('#allDataTable').click(()=> {

          // Check for the existence of the data table here
          if (!$('#station_table').children.length) {

            $.ajax({
              url:'http://localhost:5000/alldata',
              type:'GET',
              datatype:'json',
              success:(data) => {
              //console.log('You received some', data);
              var station_data ='';

                station_data +='<tr>'+'<th>ID</th>'+'<th>Station</th>'+'<th>Address</th>'+'<th>Monthly C-Store Sales</th>'+'<th>Operator</th>'+'<th>Top SKU</th>'+'</tr>';


              $.each(data, function (key,value){
              station_data +='<tr><td>'+value.ID+'</td> <td>'+value.Station+'</td><td>'+value.Address+'</td><td>'+value.monthly_cstore_sales+'</td><td>'+value.Operator+'</td> <td>'+value.Top_SKU+'</tr></td>';

            });

            $('#station_table').append(station_data);

          }

          });
        }
        else {
          $('#station_table').toggleClass('hide');
        }
      });
    });

CSS

.hide {
  display: none;
}

【讨论】：

谢谢@Matthew Coloe...很好的解决方案！

【解决方案2】：

hide() 函数隐藏了一个元素而不是一段代码。我建议为每一行添加一个标识符，例如：

station_data +='<tr id="some-identifier"><td>...</td></tr>

然后您可以使用

切换行可见性

$('#some-identifier').hide() 和 $('#some-identifier').show()

【讨论】：

我认为您的标记中还切换了 td 和 tr：[value.Top_SKU+'';]。也没有真正表明你在问什么。
谢谢@sscotti

【解决方案3】：

首先检查#station_table 是否为空。如果是这样，请通过 Ajax 加载内容。如果没有，请切换其可见性（如果您不想重新加载其内容）。

if ($('#station_table').is(':empty')) {
    ... load content via Ajax ...
}
else {
    $('#station_table').toggle();
}

【讨论】：