达到行限制后自动删除 table 行，并使用 javascript 的 Websocket 数据向该行添加新数据

Question

我是 JavaScript 的新手，不确定这个问题是否非常基本。我使用从外部 WebSocket 获取的数据创建了一个比特币价格更新仪表板。我设法从 WebSocket 获取数据并将其显示在 HTML table 上。价格每秒更新一次，因此 table 行变得疯狂。我想将 Table 行限制为 14 行，在 table 得到 14 行之后我想删除该数据并使用 Websocket 导入新数据而不增加 HTML table 行。我尽力解释了。

我提供了下面的代码片段以及我从中提取数据的外部 Websocket。

请告诉我如何将行动态插入 HTML table。提前谢谢你

    <script>
        window.onload = () => {
            function insertRow(price){
  var tr      = document.createElement("tr"),
      tdCoin  = document.createElement("td"),
      tdPrice = document.createElement("td"),
      docFrag = new DocumentFragment();
  tdCoin.textContent = "BTC";
  tdPrice.textContent = `${Number(price.slice(0,-6)).toLocaleString("en-US")}`;
  tr.appendChild(tdCoin);
  tr.appendChild(tdPrice);
  docFrag.appendChild(tr);
  return docFrag;
}

var binanceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade"),
    table = document.getElementById("pricetable");
binanceSocket.onmessage = function(event) {
  var messageObject = JSON.parse(event.data);
  table.appendChild(insertRow(messageObject.p));
}
}
        
    </script>  


<table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Coin</th>
                                            <th scope="col">Price</th>
                                          </tr>
                                    </thead>
                                    <tbody id="pricetable" class="crypt-table-hover">

                                    </tbody>
                                </table>

Answer 1

您可以使用 querySelectorAll("tr") 获取 table 中的所有行。您可以使用 removeChild.

从 table 中删除元素

因此，要确保您的 table 永远不会超过 x 行，您可以：

const rows = table.querySelectorAll("tr");
if (rows.length > 14) table.removeChild(rows[0]);

这是一个工作示例：

window.onload = () => {
  function insertRow(price) {
    var tr = document.createElement("tr"),
      tdCoin = document.createElement("td"),
      tdPrice = document.createElement("td"),
      docFrag = new DocumentFragment();
    tdCoin.textContent = "BTC";
    tdPrice.textContent = `${Number(price.slice(0,-6)).toLocaleString("en-US")}`;
    tr.appendChild(tdCoin);
    tr.appendChild(tdPrice);
    docFrag.appendChild(tr);
    return docFrag;
  }

  var binanceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade"),
    table = document.getElementById("pricetable");
  binanceSocket.onmessage = function(event) {
    var messageObject = JSON.parse(event.data);
    table.appendChild(insertRow(messageObject.p));
    
    const MAX_ROWS = 5;
    const rows = table.querySelectorAll("tr");
    if (rows.length > MAX_ROWS) table.removeChild(rows[0]);
  }
}

<table class="table table-striped">
  <thead>
    <tr>
      <th>Coin</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody id="pricetable" class="crypt-table-hover">

  </tbody>
</table>

达到行限制后自动删除 table 行，并使用 javascript 的 Websocket 数据向该行添加新数据

Automatically Delete table rows after reaching row limit and add new data to the row using the Websocket data with javascript

javascript

arrays

json

real-time-data

real-time-updates