Question

我希望用户单击一次按钮，然后使用AJAX调用（通过JQuery）单击从MySQL数据库中包含数据的表。该表格将附加到表格元素上，该表格元素会自动切换以供用户查看，并通过单击按钮再次消失。这是通过下面的代码实现的。但是，每次单击该按钮时，表都会自我繁殖，并在其再次出现时添加自身的两（2）个额外副本。这意味着每次单击该按钮时，它都会再次将其自身附加到表格元素。我希望按钮上的用户看到该表一次，并且再次单击同一按钮时该表又消失。第三次单击后，应重新显示同一表，而不是其他表。

我尝试了remove方法。我尝试了隐藏和显示方法。

           <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);

      }

       });
      });
    });

Answer 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;
}

Answer 2

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

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

然后您可以使用来切换行可见性

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

Answer 3

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

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

jQuery-追加表在单击切换按钮时会不断自我复制或自我复制

3 个答案: