Javascript数组到按时间排序的html表

我需要将一个数组转换为按时间排序的html表，首先添加秩并计算时间损失。 阵列示例：`

var array = [
  ["McNulty Oscar", "USA", "108:45.1"],
  ["Johansson Anton", "SWE", "87:48.9"],
  ["Schneider Florian", "SUI", "dns"],
  ["Rio Nicolas", "FRA", "57:45.1"]
];`

最终的HTML表应如下所示：

1 Rio Nicolas       FRA  57:45.1
2 Johansson Anton   SWE  87:55.9  30:10.8
3 McNulty Oscar     USA 107:45.2  51:03.1
  Schneider Florian SUI      dns      dns

---

我的想法是在Jquery中将数组转换为HTML表，然后使用tablesorter插件对其进行排序。我仍然不知道何时以及如何计算时间损失。这是一个好办法还是我完全出局了？

不幸的是，对于你的情况没有简单的解决办法。您正在处理的值既不是时间值（就JS而言……有关时间的更多信息，请参见JS

Date

对象），也不是可以直接减去的数字，无需进行操作

你最好的办法是把这些值分开，然后以一种漫长的方式进行减法。使用

var timeElements[2]=each.split（“.”）来获取每个值的分/秒/十分之一秒数组。此时，您可以：

做减法很长一段路。根据需要，分别减去每个值，在“列”之间结转值，或
将分和秒转换为十分之一秒，将所有三个值合并为“总十分之一秒”，进行减法运算，然后将它们转换回三个单独的值，以获得差值
第二种选择可能是更容易实现的逻辑，即使需要很多步骤


还有一个选择，如果你不需要时差。如果您可以在所有时间值前加上零，使分、秒和十分之一秒中的每一个始终具有相同的字符数，和如果“dns”是除了时间之外唯一会出现的其他值，则使用和组合在一起的直接

HTML

更新：修改了代码并包含排名列和排序。
看起来不错！装船后有没有可能按时间分类？（不单击表格标题）？还有一个问题-如何将第一列的秩添加到表中？
<div id="result"></div>

$(function () {
    var array = [
        ["Name", "Country", "Time", "Diff"],
        ["McNulty Oscar", "USA", "108:45.1", ""],
        ["Johansson Anton", "SWE", "87:48.9", ""],
        ["Schneider Florian", "SUI", "dns", ""],
        ["Rio Nicolas", "FRA", "57:45.1", ""]
    ],
    // time column (zero-based index)
    timeColumn = 3,
    diffColumn = 4,

    // convert min:sec.ms => sec.ms
    convertTime = function (time) {
        var val;
        if (time && /:/.test(time)) {
            val = time.split(':');
            return parseFloat(val[0] || 0) * 60 + parseFloat(val[1] || 0);
        } else {
            return Number.POSITIVE_INFINITY;
        }
    },
    // convert sec.ms => min:sec.ms
    formatTime = function (time) {
        var minutes = parseInt(time / 60);
        return minutes + ':' + (time - (minutes * 60)).toFixed(1);
    },
    calculateDiff = function (table) {
        var $tds, minTime,
        $table = $(table),
        $trs = $table.children('tbody').children(),
        times = [];
        $trs.each(function () {
            $tds = $(this).children();
            times.push(convertTime($tds.eq(timeColumn).text()));
        });
        minTime = Math.min.apply(Math, times);
        $trs.each(function (i) {
            var diff = times[i] - minTime,
            result = times[i] === Number.POSITIVE_INFINITY ? 'dns' :
            diff === 0 ? '' : formatTime(diff);
            $(this).children()
            .eq(0).html(result !== 'dns' ? i + 1 : '').end()
            .eq(diffColumn).html(result);
        })
        .trigger('update');
    };

    $('#result').tablesorter({
        theme: 'blue',
        emptyTo: 'zero',
        widgets: ['zebra', 'build'],
        sortList: [[3, 0]],
        widgetOptions: {
            build_source: array,
            build_footers: {
                rows: 0
            },
            build_numbers: {
                // include row numbering column?
                addColumn: "Rank",
                // make column sortable?
                sortable: true
            }
        },
        initialized: function (table) {
            calculateDiff(table);
        }
    });
});