javascript - 如果我在 jquery 绑定中更改，为什么 html 表的顺序不会改变？

Question

我有一个从动作返回的 JSON 对象填充的 html 表。它可以工作，但是如果更改<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);
                    }
}

更新：

请参阅我更改了 html 表中的 tds 并与之匹配，我更改了正在追加的 tds 的顺序......它没有改变。订单保持不变

标签： javascriptjqueryasp.net-mvcjquery-ui

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它的结构。

希望有帮助。