Блог

Главная - Вопросы по программированию - Динамически созданная таблица неправильно отображается при перезагрузке

Динамически созданная таблица неправильно отображается при перезагрузке

#javascript #html #jquery #ajax

Вопрос:

Я динамически создаю таблицу с помощью JavaScript/jQuery/html из вызова Ajax. При первой загрузке таблицы она отображается в правильном формате. Однако, когда я выполняю обновление/перезагрузку, форматирование таблицы неверно. Я включил обещание попытаться исправить это в соответствии с тем, как обещать вызов Ajax

Исправлено при первой загрузке:

введите описание изображения здесь

После перезагрузки:

введите описание изображения здесь

Сокращенный код-это:

 $('#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>

Комментарии:

1. Я не думаю, что там должно быть что-то за пределами tbody . На остальное я еще не смотрел.

2. @wazz Извините, что вы имеете в виду под этим комментарием, пожалуйста?

3. Первая строка должна быть внутри thead тега. Я не знаю, повлияет ли это на вашу проблему, но я думаю, что это более правильно. developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody . «Если вы используете <tbody>, у вас также не может быть строк таблицы (<tbody><tr> элементы), которые являются прямыми дочерними элементами <tr><таблицы>, но не включены в <table><tbody>».

4. @wazz Хорошо, я понял, о чем ты говоришь. Я добавил тег thead, который, как вы говорите, более корректен; однако это не решило проблему.

Ответ №1:

Ответ состоит в том, чтобы переместить заполнение первого столбца туда, где я делаю входные строки.

 $('#refreshTableBtn').click(function(){
    //Re-display the exercise table
    exerciseFirstColumnDetails()
        .then(({numExeDetails, exercises}) => {
            console.log({numExeDetails, exercises})
            loadExerciseDetails({numExeDetails, exercises})
        })
        .catch((error) => {
            console.log(error   " Error in exerciseOverview.js - call 'loadExerciseDetails' function");
        })
});

function exerciseFirstColumnDetails() {
    //Get Patient Exercise Details
    $('#exerciseTable tr').empty();
    
    var numExeDetails = 0;
    var exercises = []; 
    
    //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 {
    //          $("#chartDisp").show();
                
                //Create first table column
                $("<th class='h2Colour sticky-col' colspan='1'>Week</th>").appendTo($("#tableHeadersWeek"));
                
                $("<th class='bgColourWhite sticky-col' colspan='1'>Date</th>").appendTo($("#tableHeadersDate"));
                
                $("<th class='bgColourWhite sticky-col' colspan='1'>Day</th>").appendTo($("#tableHeadersDay"));
                
                $("<th colspan='1' class='tdNoBorder sticky-col'></th>").appendTo($("#tableHeadersSpace1"));
                
                $("<th class='tdNoBorder sticky-col'></th>").appendTo($("#tableHeadersSet"));
                
                //Loop through the Execise details
                //Populate the variable number of exercise variables and keep count.
                $.each(responseJson1a, function() {
                    //Pass 'exercises' to the next funtion
                    exercises[numExeDetails] = this.edeType   " - "   this.edeUnit;
                    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"));
                });
                
                $("<td class='tdNoBorder sticky-col' colspan='1'></td>").appendTo($("#InsertSet"));
            }
            resolve({numExeDetails, exercises});
        });
    });
};

function loadExerciseDetails({numExeDetails, exercises}) {
    
    $.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") {
            //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='h2Colour' colspan='3'>1</th>").appendTo($("#tableHeadersWeek"));
                
                $("<th class='h1Colour' colspan='3'>"   today   "</th>").appendTo($("#tableHeadersDate"));
                
                $("<th class='h1Colour' colspan='3'>"   todayDay  "</th>").appendTo($("#tableHeadersDay"));
                
                $("<th colspan='3' class='tdNoBorder'></th>").appendTo($("#tableHeadersSpace1"));
                
                $("<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
                var exercisesIdx = 0;
                
                for(let i = 1; i <= numExeDetails; i  ) {
                    var exerciseDetail = "ExerciseDetail"   i;
                    
                    $("<td class='bgColourWhiteBold sticky-col'>"  exercises[exercisesIdx]  "</td>").appendTo($('#' exerciseDetail));
                    exercisesIdx  ;
                    
                    $("<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));
                }
                
                $("<td class='tdNoBorder sticky-col' colspan='3'><input type='button' name='addSetBtn' class='btn btn-sm h2Colour' style='width:100%' value='Add Set'></td>").appendTo($("#InsertSet"));
            }
        }else{
            //Display existing sets
        }
    }); 
}
Метки: