代码之家 › 专栏 › 技术社区 › jpgerb

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

jquery html javascript

jpgerb · 技术社区 · 3 年前

首先,我确实看过 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 += 特别是 += 部分

1 回复 | 直到 3 年前

Kinglish 3 年前

下面是一些关于如何使用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>