Почему последовательность html-таблицы не изменяется, если я изменяю привязку jquery?

Question

У меня HTML-таблица заполняется из объекта JSON, возвращаемого из действия. Это работает, но если изменить последовательность <td> и добавить в код, порядок не изменится и останется таким, как есть. Зачем?

 <table id="tbl" style="width: 80%; margin: auto" class="table table-bordered  table-hover mt-2">
                                            <thead>
                                                <tr class="GridHeading">
                                                    <td>Remarks no</td>
                                                    <td>date</td>
                                                    <td>Statuses</td>
                                                    <td>Remarks by Date</td>                                            
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr></tr>


                                            </tbody>
                                        </table>

код:

 var tr;
                if (data.ListRemarksHistory != null) {
                    for (var i = 0; i < data.ListRemarksHistory.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + data.ListRemarksHistory[i].Remarks + "</td>");

                        tr.append("<td>" + data.ListRemarksHistory[i].User + "</td>");

                        tr.append("<td>" + data.ListRemarksHistory[i].Status + "</td>");

                        tr.append("<td>" + formatDate(data.RemarksHis[i].RemarksDate) + "</td>");

                        $('#tbl').append(tr);
                    }
}

Обновление:

см., Я изменяю tds в таблице html и, чтобы соответствовать этому, я изменяю порядок добавления tds ... это не изменяется. Порядок остается прежним

Answer 1

Если вам нужна дополнительная помощь, предоставьте Минимальный воспроизводимый пример . Обязательно включите пример структуры данных.

Рассмотрим следующий пример.

if (data.ListRemarksHistory.length) {
  $.each(data.ListRemarksHistory, function(i, item) {
    var tr = $("<tr>", {
      id: "row-" + i
      class: "remark-row"
    }).appendTo($("#tbl"));
    $("<td>").html(item.Remarks).appendTo(tr);
    $("<td>").html(item.Users).appendTo(tr);
    $("<td>").html(item.Status).appendTo(tr);
    $("<td>").html(item.RemarkDate).appendTo(tr);
  });
}

$.each() предназначен для перебора массивов или объектов. Это может быть очень полезно для данных такого рода. Судя по вашему сообщению, data.ListRemarksHistory представляется объектом. Если это не так, вы можете просмотреть data и его структуру.

Надеюсь, это поможет.