【发布时间】：2021-09-27 01:57:15
【问题描述】：
我在 Ajax 调用中使用 JavaScript/jQuery/html 动态创建表。第一次加载表格时，它会以正确的格式显示。但是，当我进行刷新/重新加载时，表格的格式不正确。我已将 Promise 包含在内，以尝试按照 How to Promisify an Ajax Call 修复它
首次加载时正确：
重载后：
缩写代码为：
$('#refreshTableBtn').click(function(){
//Re-display the exercise table
exerciseFirstColumnDetails()
.then((numExeDetails) => {
console.log(numExeDetails)
loadExerciseDetails(numExeDetails)
})
.catch((error) => {
console.log()
})
});
function exerciseFirstColumnDetails() {
//Get Patient Exercise Details
$('#exerciseTable tr').empty();
var numExeDetails = 0;
//Get the Patient's exercise headers
return new Promise((resolve, reject) => {
$.ajax({
url: "PatientExerciseHeadersListView",
data : {
ssAccRole : sessionStorage.getItem('ssAccRole'),
ssAccID : sessionStorage.getItem('ssAccID'),
ssPatExeID : sessionStorage.getItem('ssPatExeID'),
},
type: "POST",
cache: false,
//Loading spinner
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
})
.fail (function(jqXHR, textStatus, errorThrown) {
$('#ajaxGetUserServletResponse4').text('Error getting Exercise details.');
reject();
})
.done(function(responseJson1a) {
dataType: "json";
if (Object.keys(responseJson1a)[0] == "empty") {
$('#ajaxGetUserServletResponse4').text('No Exercise details.');
}else {
//Create first table column
//Loop through the Execise details
//Populate the variable number of exercise variables and keep count.
$.each(responseJson1a, function() {
numExeDetails++;
var html = "";
html += "<tr id='ExerciseDetail"+numExeDetails+"' name='" + this.edeId + "'>";
html += "<td class='bgColourWhiteBold sticky-col'>"+ this.edeType + " - " + this.edeUnit + "</td>"
html += "</tr>"
$(html).insertBefore($("#InsertSet"));
});
}
resolve(numExeDetails);
});
});
};
function loadExerciseDetails(numExeDetails) {
$.ajax({
url: "PatientExerciseDetailsListView",
data : {
ssAccRole : sessionStorage.getItem('ssAccRole'),
ssAccID : sessionStorage.getItem('ssAccID'),
ssPatExeID : sessionStorage.getItem('ssPatExeID'),
ssPatExeID : sessionStorage.getItem('ssPatExeID'),
viewFrom : $("#viewFromDate").val(),
viewTo : $("#viewToDate").val(),
},
type: "POST",
cache: false,
//Loading spinner
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
})
.fail (function(jqXHR, textStatus, errorThrown) {
$('#ajaxGetUserServletResponse4').text('Error getting Exercise details.');
})
.done(function(responseJson1a) {
dataType: "json";
$('#ajaxGetUserServletResponse4').text('');
if (Object.keys(responseJson1a)[0] == "empty") {
//Display an empty table for data entry
//Check if the date range includes today's date.
if (moment($("#viewFromDate").val(), 'DD/MM/YYYY').isAfter(moment())
|| moment($("#viewToDate").val(), 'DD/MM/YYYY').isBefore(moment())){
$('#ajaxGetUserServletResponse4').text('No Patient exercises in this date range.');
}else {
var today = moment(new Date()).format("DD/MM/YYYY");
var todayDay = moment(new Date()).format('ddd')
//If the date range includes todays date then display an empty table for data entry
$("<th class='h1Colour'>Set 1</th>").appendTo($("#tableHeadersSet"));
$("<th class='h1Colour'>Set 2</th>").appendTo($("#tableHeadersSet"));
$("<th class='h1Colour'>Set 3</th>").appendTo($("#tableHeadersSet"));
//Create three sets for each Exercise Detail
for(let i = 1; i <= numExeDetails; i++) {
var ExerciseDetail = "ExerciseDetail" + i;
alert(ExerciseDetail);
$("<td class='bgColourWhiteBold sticky-col exeSet'><input type='text' name='exeSet' data-set='1' value='' size='4'></td>").appendTo($('#'+ExerciseDetail));
$("<td class='bgColourWhiteBold sticky-col exeSet'><input type='text' name='exeSet' data-set='2' value='' size='4'></td>").appendTo($('#'+ExerciseDetail));
$("<td class='bgColourWhiteBold sticky-col exeSet'><input type='text' name='exeSet' data-set='3' value='' size='4'></td>").appendTo($('#'+ExerciseDetail));
}
}
}else{
//Display existing sets
}
});
}
HTML：
<table id='exerciseTable'>
<tr id="tableHeadersSet">
<!-- Place for Set row -->
</tr>
<tbody id="tableBody">
<!-- Add each of the Exercise Details -->
<tr id="InsertSet">
<!-- Place for Insert Set button -->
</tr>
</tbody>
</table>
【问题讨论】：
-
我认为
tbody之外不应该有任何东西。其他的我还没看。 -
@wazz 抱歉，请问您的评论是什么意思？
-
第一行应该在
thead标签内。我不知道它是否会影响您的问题，但我认为这更正确。 developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody。 “如果你使用 ，你也不能有作为的直接子元素但不包含在 内的表格行（
元素）。” @wazz 好的，我明白你在说什么。我添加了thead标签，正如您所说的那样更正确；但是，这并没有解决问题。
标签： javascript html jquery ajax