首先 - 我确实看过如何使用 jQuery 替换 div 的 innerHTML?如果我想<tr>
在这种情况下替换填充标签,那就太好了。
我正在尝试制作一个动态表,该表正在加载用于加密挖掘的 API。每当有新的块命中时,我想将它们添加到表的顶部并删除超过 100 个(<tr>
最多只有 100 个)。
现在,我正在做的是:
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()
调用 my 时数据都会重新加载(大约每 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 的行将很容易(我希望如此)。
所以 - 这一切要说:
是否可以将信息添加到 jQuery 中的
id
/tag
而不删除其中的所有现有数据。基本上相当于.innerHTML +=
具体的+=
部分。
下面是一些关于如何使用 JQ 添加到顶部、添加到底部、从顶部移除和从底部移除的示例
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()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<hr>
<button data-action='add-top'>Add row to top</button>
<button data-action='add-bottom'>Add row to end</button>
<hr>
<button data-action='remove-top'>Remove row from top</button>
<button data-action='remove-bottom'>Remove row from end</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句