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

Posted 2023-05-08

【中文标题】如果我在 jquery 绑定中更改，为啥 html 表的顺序不会改变？

【英文标题】：Why the sequence of html table is not changed if i change in jquery binding?如果我在 jquery 绑定中更改，为什么 html 表的顺序不会改变？

【发布时间】：2019-11-18 22:42:26

【问题描述】：

我有一个从动作返回的 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 的顺序......它没有改变。订单保持不变

【问题讨论】：

不清楚你在问什么。 “改变顺序”——什么？ [编辑：找到隐藏的 td] “顺序不变” - 什么顺序？

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

你能重现这个问题吗？

我没有“看到”任何“变化”。你能提供之前/之后的代码吗？

【参考方案1】：

如果您需要更多帮助，请提供Minimal, Reproducible Example。确保包含数据结构的示例。

考虑以下示例。

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 及其结构。

希望对您有所帮助。