Javascript 将表行放置在 ID 较大和较小的行之间

Question

我正在构建一个系统，该系统在屏幕上(在表格元素中)输出汽车列表。该页面通过对服务器的 HTTP 调用自动加载更新。

每辆车都有一个ID、一个状态和一些不相关的东西。 现在，当用户加载页面时，会显示没有状态“维护”和“失事”的汽车，并且每五秒就会从服务器加载新的 JSON 数据。如果有一辆汽车完成了维护，则应将其添加到表中。该表是按汽车 ID 排序的，问题来了。 我写了一些伪代码来澄清我的问题:

if (row_with_greater_id_exits && row_with_lower_id_exists) {
    place_row_between_firstRowWithGreaterId_and_FirstRowWithLowerId();
} else if (is_row_with_greater_id) {
    jQuery('table#cars tbody').append(generatedHtml);
} else if (is_row_with_lower_id) {
    jQuery('table#cars tbody').prepend(generatedHtml);
}

问题是我不知道如何找到具有较大 id 的第一行或具有较小 ID 的第一行。 ID 并不总是成功，因为有些汽车被毁坏了，并且状态也被破坏了。

我希望这里有人遇到过类似的问题，并且可以帮助我找到解决方案。

非常感谢!

Answer 1

您需要循环遍历行并比较 id。当新行的 ID 小于循环中的当前行时，在当前行之前插入新行，并中断循环。

rows.each(function(i, el) {
    if (+newrow.id < +el.id) {
        $(el).before(newrow);
        return false;
    }
})
if (!newrow.parentNode)
    rows.parent().append(newrow);

此代码假设 rows 是一个包含所有行的集合的 jQuery 对象，而 newrow 是表示新行的 DOM 元素。

还假设 ID 是简单的数字。请注意，数字 ID 仅在 HTML5 中有效。

<小时/>

就我个人而言，我只会使用 native API 来实现此目的:

var tbody = document.querySelector("tbody");

tbody.insertBefore(newrow, [].reduce.call(tbody.rows, function(bef, el) {
    return bef || +newrow.id > +el.id ? bef : el;
}, null));

无需测试isFirstLoad。当tbody为空时，它仍然可以工作。但对于旧版浏览器，您需要一个 .reduce() shim。