达到行限制后自动删除表行，并使用带有 javascript 的 Websocket 数据向行添加新数据答案

【问题标题】：Automatically Delete table rows after reaching row limit and add new data to the row using the Websocket data with javascript达到行限制后自动删除表行，并使用带有 javascript 的 Websocket 数据向行添加新数据
【发布时间】：2022-01-09 07:14:26
【问题描述】：

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

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

请告诉我应该如何将行动态插入到 HTML 表格中。提前非常感谢您

    <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>

【问题讨论】：

有人帮我解决这个问题

标签： javascript arrays json real-time-updates real-time-data

【解决方案1】：

您可以使用querySelectorAll("tr") 获取表中的所有行。您可以使用 removeChild 从表格中删除元素。

所以，为了确保您的表格永远不会超过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>

【讨论】：

它工作了谢谢！！！！意义重大