0

我正在构建一个在屏幕上（在表格元素中）输出汽车列表的系统。该页面通过对服务器的 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 并不总是成功的，因为有些汽车被破坏并且状态被破坏。

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

提前谢谢了！

4

2 回答 2

2

您需要遍历行，并比较 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 中有效。

就个人而言，我只是为此使用本机 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。

于 2013-02-05T20:37:21.323 回答
0

我有这个： id="car-1" data-id="1"

我假设该data属性在tr元素上。显然，如果它位于一行中的一个单元格上，您可以调整以下内容。

遍历表检查每一行的 id，并在第一行的 id 大于新行之前插入新行：

// assume newId is the new ID, somehow set from your JSON

var rowInserted = false;
jQuery('#invoices-outstanding tbody tr').each(function() {
   var $row = $(this);
   if (+$row.attr("data-id") > newId) {
      $row.before(generatedHtml);
      rowInserted = true;
      // break out of each loop
      return false;
   }
});
if (!rowInserted)
   jQuery('#invoices-outstanding tbody').append(generatedHtml);
于 2013-02-05T20:42:36.133 回答