JQuery - 单击切换按钮时，附加表会不断增加自身或复制自身
Posted
技术标签:
【中文标题】JQuery - 单击切换按钮时，附加表会不断增加自身或复制自身【英文标题】：JQuery - Appended Table keeps multiplying itself or duplicating itself when a toggle button is clicked 【发布时间】：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);
);
);
);
【问题讨论】：
你最终得到这个工作了吗？ 【参考方案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();
【讨论】：
以上是关于JQuery - 单击切换按钮时，附加表会不断增加自身或复制自身的主要内容，如果未能解决你的问题，请参考以下文章