jquery - 以固定的行数将表行推到底部

Question

我有一个问题。我目前正在使用 .prepend()这确实将旧表行推到底部，而新表行出现在顶部。但是，我必须将表行数限制为 10，这样做一次 .prepend()达到 10 行，最新的行将出现在表格的底部，随后再次上升，反之亦然。我想知道新行将永久出现在 <tbody> 顶部的方法同时将较旧的行推到底部。这是我的代码供引用。

// show the keys currently held in the specified type of storage in the

// specified table

 function showStorageKeys(type, table, table1) {

// get the specified type of storage, i.e. local or session
var storage = window[type + 'Storage'];
// remove the rows in the specified table before we start
$(table + " > tbody > tr").remove();
$(table1 + " > tbody > tr").remove();
// loop through the existing keys in the storage and add them to the TBODY
// element as rows
for (var i = 0; i < storage.length; i++) {
    var key = storage.key(i);
    if ((key == "0") || (key == "1") || (key == "2") || (key == "3") || (key == "4") ||             (key == "5") || (key == "6") ||
            (key == "7") || (key == "8") || (key == "9")) {
        var details = storage.getItem(key);
        details = details.split(";");
        var lat = details[0];
        var long = details[1];
        var zoom = details[2];
        var time = details[3];
        var address = details[4];
        //var date = details[5];
        if ((address == undefined) || (time == undefined) || (address == "")) {
            document.getElementById("dummy").value = "";
        }
 else {
            $("#history tbody").prepend(
"<tr>" + "<td width='5%'>" + time + "</td>"  +"<td>" + "<a href='JavaScript:getSite(" + lat + ',' + long + ',' + zoom + ")'>" + address +"</a>" +</td>" + "<td width='15%'>" + "<input type='submit'   value='Remove' onclick='removeItem(\"" + type + "\", \"" + key + "\")'/>" + "</td>" + "</tr>");
        }
    }
}
]

Answer 1

在#history tbody中添加一个元素后，要保证这个元素最多有10行，即最多 10 个 child ，你可以这样做:

while($("#history tbody").children().length > 10){
  $("#history tbody").children().last().remove()
}

并将此代码直接放在插入新行的代码之后。

此外，请注意，如果经常使用元素的查询对象，通常最好将它们存储在变量中，因为每次调用查询函数可能会很慢，所以在我上面给你的例子中，并且在您的代码中，您应该考虑到这一点，这样会快得多:

var history_tbody = $("#history tbody")
...
history_tbody.prepend( ... )

while(history_tbody.children().length > 10){
  history_tbody.children().last().remove()
}    

并尝试让你对 history_tbody 的定义只发生一次，例如在文件的开头，在 document.ready() 之后