我有三个表，我使用select列表元素显示每个表，并使用ajax和jquery返回表。我希望每当我从列表中选择一个新表时，ajax应该只从该表中为我提供数据。
这是我的表格：
<div class="panel">
<div class="panel-heading">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Term</span>
<!-- I passed the tables name as values for a specific period -->
<select name="term" class="form-control" id="term">
<option value="">Select Period</option>
<option value="period_one">1st Period</option>
<option value="period_two">2nd Period</option>
</select>
</div>
</div>
<div class="panel-body">
<table class="table table-responsive table-bordered table-condensed table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Class</th>
<th>Score</th>
</tr>
</thead>
<tbody id="periodTable">
</tbody>
</table>
</div>
</div>
问题不在于我没有得到理想的结果。我得到了我想要的结果，这就是为什么我觉得我没有必要从findGrades.php添加代码。
这是我的剧本：
$(document).ready(function() {
$('#term').on('change', function() {
/* Act on the event */
var term = $('#term').val();
if (term != '') {
$.ajax({
url:"findGrades.php",
type:"post",
data:{"term":term},
dataType:"json",
success:function(data){
// Lfrankie solution
$("#periodTable").replaceWith('<tbody id="periodTable"></tbody>');
for (var count = 0; count < data.length; count++) {
var htmlData = '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';
htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';
htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';
if (data[count].score <= 69 ) {
htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
} else {
htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
}
//I feel this is where my problem lies
$("#periodTable").append(htmlData);
}
$('#dataTable').DataTable();
}
});
} else {
$("#periodTable").html('');
}
});
});
我遇到的问题是每当我选择一个表时，结果都很好，但是当我选择一个新表时，它会将新结果添加到旧结果中。
Ex：表1：
结果2应该只显示“狗”和“狗”。和山羊＆＃39;我意识到这是因为我添加数据的方式 $（＆＃34; #periperTable＆＃34;）。append（htmlData）; 。我已经尝试将其更改为 $（＆＃34; #periperTable＆＃34;）。html（htmlData）; ，它只返回表格中的单个项目，例如＆＃39; cat＆＃39;从表1和＆＃39; rat＆＃39;来自表2
我怎样才能有效地实现这一目标。如果需要更多信息，请告诉我。
更新：刚刚按照某些人的要求添加了我的HTML。此外，我还提到了一个我忘记提及的基本方面＆＃39; Datables＆＃39;，我也加入了。
答案 0 :(得分：1)
在for循环之前声明变量htmlData并在for循环之后写$("#periodTable").html(htmlData);。
$(document).ready(function() {
$('#term').on('change', function() {
/* Act on the event */
var term = $('#term').val();
if (term != '') {
$.ajax({
url:"findGrades.php",
type:"post",
data:{"term":term},
dataType:"json",
success:function(data){
var htmlData="";
for (var count = 0; count < data.length; count++) {
htmlData += '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';
htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';
htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';
if (data[count].score <= 69 ) {
htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
} else {
htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
}
}
$("#periodTable").html(htmlData);
}
});
} else {
$("#periodTable").html('');
}
});
});
答案 1 :(得分：0)
我认为您应该在填充之前简单地清除$("#periodTable")的html：
$(document).ready(function() {
$('#term').on('change', function() {
/* Act on the event */
var term = $('#term').val();
//---> HERE BLANK THE periodTable <---
$("#periodTable").html("");
if (term != '') {
$.ajax({
url:"findGrades.php",
type:"post",
data:{"term":term},
dataType:"json",
success:function(data){
for (var count = 0; count < data.length; count++) {
var htmlData = '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';
htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';
htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';
if (data[count].score <= 69 ) {
htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
} else {
htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
}
//I feel this is where my problem lies
$("#periodTable").append(htmlData);
}
}
});
} /* ELSE COULD BE REMOVED
else {
$("#periodTable").html('');
}*/
});
});
答案 2 :(得分：0)
如果没有看到您网页的 HTML ，我只能猜测您是从一张空桌开始的。您的第一个AJAX调用会附加第一组数据。您的第二个电话会追加其数据，因为这就是您要求它做的事情。
要解决此问题，您必须在success()功能的开头替换空表。然后，您可以安全地附加新数据，无论是您第一次调用它还是 n 次。