jquery - 如何按表中的索引将每个列转换为本地时刻？

Question

我有一个包含 8 列的表。最后一列中的每个日期值都需要转换为浏览器本地。目前它显示为UTC：

所以我添加了一些 JQuery 来循环遍历索引处的每一行，使用.eq(index)它可以成为'6'JQuery 中的索引。但是当我测试这个函数时，它只转换表中的最后一行 UpdatedTime 并且时间不是本地时间，如下所示：

如何将指定列的每一行转换为本地时刻？

这是我用来循环的 JQuery 函数：

$(".td-limit").eq(6).each(function () {
        var updatedTimeISO = moment.utc($(this).data('order')).toISOString();
        var updatedTimeLocal = moment(updatedTimeISO);
    $(this).text(updatedTimeLocal);
    });

这些是 DataTable 中的列，其中最后一列是UpdatedTime需要转换的目标：

                    @foreach (Models.Escalation item in Model)
                    {

                        <tr>
                            <td>@item.ID</td>
                            <td>@item.Application</td>
                            <td class="td-limit">@item.EMAD</td>
                            <td class="td-limit">@item.Event</td>
                            <td class="td-limit">@item.Status</td>
                            <td style="font-size: 16px;" class=" td-limit">@item.Statement</td>
                            <td class="td-limit">@item.Created</td>
                            <td class="td-limit">@item.Update</td>
                            <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td>

                        </tr>

                    }

Answer 1

修改您的 Razor，使您不包括更新的时间。

 @foreach (Models.Escalation item in Model)
                    {

                        <tr>
                            <td>@item.ID</td>
                            <td>@item.Application</td>
                            <td class="td-limit">@item.EMAD</td>
                            <td class="td-limit">@item.Event</td>
                            <td class="td-limit">@item.Status</td>
                            <td style="font-size: 16px;" class=" td-limit">@item.Statement</td>
                            <td class="td-limit">@item.Created</td>
                            <td class="td-limit">@item.Update</td>
                            <td data-order="@item.UnixTimeStamp" class="td-limit"></td>

                        </tr>

                    }

然后使用这个 jQuery 在客户端更新它。

$("td[data-order]").each(function() {
  var updatedTimeISO = moment.utc($(this).data('order')).toISOString();
  var updatedTimeLocal = moment(updatedTimeISO);
  $(this).text(updatedTimeLocal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>ID</td>
    <td>Application</td>
    <td class="td-limit">EMAD</td>
    <td class="td-limit">Event</td>
    <td class="td-limit">Status</td>
    <td style="font-size: 16px;" class="td-limit">Statement</td>
    <td class="td-limit">Created</td>
    <td class="td-limit">Update</td>
    <td data-order="2013-02-02T21:01:26.0828604Z" class="td-limit"></td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Application</td>
    <td class="td-limit">EMAD</td>
    <td class="td-limit">Event</td>
    <td class="td-limit">Status</td>
    <td style="font-size: 16px;" class=" td-limit">Statement</td>
    <td class="td-limit">Created</td>
    <td class="td-limit">Update</td>
    <td data-order="2013-03-02T21:01:26.0828604Z" class="td-limit"></td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Application</td>
    <td class="td-limit">EMAD</td>
    <td class="td-limit">Event</td>
    <td class="td-limit">Status</td>
    <td style="font-size: 16px;" class=" td-limit">Statement</td>
    <td class="td-limit">Created</td>
    <td class="td-limit">Update</td>
    <td data-order="2013-07-02T21:01:26.0828604Z" class="td-limit"></td>
  </tr>
</table>