如何在 jquery 中的表中添加新的“顶”行而不删除其他行

下载

首先 - 我确实看过如何使用 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在jQuery中删除CSS属性

如何在jQuery中将新表行添加到所选行的顶部

如何在jQuery中复制带有dropdownlist的表行

如何在Jquery的id属性中添加其他参数?

如何在Jquery中的元素上删除/添加活动类?

我如何使用jQuery删除MySQL中的行表?

如果表已经多于一行,如何使用jquery向表中添加新行

如何删除一行并使用php文件中的已删除指针添加其他新行?

如何从数组添加其他数据以导出到jQuery数据表中的Excel

如何在jQuery生成的CSV中添加新行?

如何在Jquery中验证?

使用javascript / jQuery插入新行时,如何在每个表格行中插入“删除按钮”

如何在jquery ajax中添加和检索其他数据到serialize()?

如何将删除按钮添加到jQuery的clone()方法中新添加的表行中?

如何在不删除Linux中其他行的情况下删除标题?

如何在jQuery DataTables行添加功能中传递HTML

删除datatables表(jquery)中的所有行后,如何在CSS中删除叠加层?

单击另一行中的按钮后,如何使用jquery自动禁用其他行?

如何在jQuery中向select添加新选项?

如何通过使用jQuery删除html表中的选定行?

如何在其他页面中连接到jQuery

如何在jquery中给定的id之后添加表行

jQuery数据表:如何在csv文件中追加新行

Aurelia.js 如何在表中添加新行?不使用 jquery

如何仅在jquery数据表中删除子行?

如何在不删除其他列的情况下合并 Pandas 中的行?

如何在 jquery 中乘法

如何在导航栏中添加顶行 - Flutter

如何在 Altium 中为文本添加顶行?