![](/img/trans.png)
[英]Why is electron's showMessageBoxSync duplicating itself when cancel is clicked?
[英]JQuery - Appended Table keeps multiplying itself or duplicating itself when a toggle button is clicked
我希望用户单击一个按钮以使用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);
}
});
});
});
一种解决方案是在进行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;
}
hide()
函数隐藏一个元素而不是一段代码。 我建议向每行添加一个标识符,例如:
station_data +='<tr id="some-identifier"><td>...</td></tr>
然后,您可以使用
$('#some-identifier').hide()
和$('#some-identifier').show()
首先检查#station_table是否为空。 如果是这样,请通过Ajax加载内容。 如果不是,请切换其可见性(如果您不想重新加载其内容)。
if ($('#station_table').is(':empty')) {
... load content via Ajax ...
}
else {
$('#station_table').toggle();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.