如何在不删除其他行的情况下向jquery中的表中添加新的“top”行

首先,我确实看过 How to replace innerHTML of a div using jQuery? 如果我想替换填充标签,那就太好了 <tr> 在这种情况下。

我正在尝试创建一个动态表,加载用于加密挖掘的API。每当有新的块命中时,我想将它们添加到表的顶部,并删除任何超过100个(仅100个)的块 <tr> 麦克斯)。

现在,我要做的是:

document.getElementById('blockList').innerHTML += "<tr><td>" ...

这会将行添加到以下内容的顶部:

<table class="table1">
    <thead class="thead-light">
        <tr>
            <th>#</th>
            <th>Time (Local)</th>
            <th class='collapsableHeader' onclick='collapseTable()'>Hash</th>
            <th>Height</th>
            <th>Effort</th>
            <th>Found By</th>
            <th>Pool/Solo</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="blockList"></tbody>
</table>

我现在这样做的问题是,它清除了整个表格:

document.getElementById("blockList").innerHTML = "";

...这会导致一点闪烁,或者我更喜欢称之为“抽搐”,而数据每次都会重新加载 setInterval() 被调用(大约每10秒一次)。

我的第一个希望是jQuery将最小化或删除闪烁。这里是我挂断电话的地方——上面的链接是用新信息替换标签:

$("#blockList").html("STUFF TO REPLACE EXISTING STUFF");
//or
$("#blockList").text("STUFF TO REPLACE EXISTING STUFF");

text() 在我的情况下不起作用,因为我用的是 innerHTML += 也要添加标签。。。

document.getElementById('blockList').innerHTML += "<tr><td>" + i + "</td><td>" + displayBlocks[i]["timestamp"] + "</td><td class='collapsable'>" + displayBlocks[i]["hash"] + "</td><td class='collapsablePlaceholders'>|</td><td>" + displayBlocks[i]["height"] + "</td><td style='color:" + displayBlocks[i]["luckColor"] + "'>" + displayBlocks[i]["luck"] + "</td><td>" + displayBlocks[i]["worker"] + "</td><td>" + displayBlocks[i]["ps"] + "</td><td>" + displayBlocks[i]["status"] + "</td></tr>";

如果可能,则删除行>100英镑很容易(我希望如此)。

所以,所有这些都是为了说明:

是否可以将信息添加到 id / tag 在jQuery中,不删除其中的所有现有数据。基本上相当于 .innerHTML += 特别是 += 部分

let n = 0 $('button').click(function() { n++ let fakerow = `<tr><td>${n}</td><td>12:34</td><td>123123123</td><td>10</td><td>??</td><td>Fred</td><td>Solo</td><td>available</td></tr>`; let action = $(this).data('action'); if (action == 'add-top') { $('#blockList').prepend($(fakerow)) } else if (action == 'add-bottom') { $('#blockList').append($(fakerow)) } else if (action == 'remove-top') { $('#blockList tr').first().remove() } else if (action == 'remove-bottom') { $('#blockList tr').last().remove() } })