如何覆蓋 HTML 數據表上的數據？

Question

在模板上，我從 Websocket 連接接收數據，這是我接收數據的方式：

<script language="javascript">
    mySocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        console.log('data', data);
        $('history').append('</td><td>'+data['Rate']+'</td><td>'+data['Quantity']+'</td></tr>')
    };
</script>

在我的 HTML 我有一個數據表：

<table class=" table table-hover" id="history">
    <thead>
      <tr>
        <th>RATE</th>
        <th>QUANTITY</th>
      </tr>
    </thead>
<tbody>

每次我收到一條消息時，消息的內容都會附加到表格中。 這段代碼沒有任何問題，問題是它會不斷向表中添加數據，使表變得非常大而且很難看。

相反，我想要的是：該表保持 10 條記錄的固定高度，因此每次收到新消息時，該消息都會附加到表的第一行，而位於第十位的消息桌子消失了。 有沒有辦法做到這一點？ 提前致謝。

Answer 1

也許您的代碼不起作用。

更改如下。

<table class=" table table-hover" id="history">
    <thead>
      <tr>
        <th>RATE</th>
        <th>QUANTITY</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script language="javascript">
    mySocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        console.log('data', data);
        $('#history > tbody').prepend('<tr><td>'+data['Rate']+'</td><td>'+data['Quantity']+'</td></tr>');
        if ($('#history > tbody > tr').length > 10) {
           $('#history > tbody > tr:last-child').remove();
        }

    };
</script>

 var ind = 0; setInterval(function () { ind++; $('#history > tbody').prepend('<tr><td>aaa' + ind + '</td><td>bbb</td></tr>'); if ($('#history > tbody > tr').length > 10) { $('#history > tbody > tr:last-child').remove(); } }, 1000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table class=" table table-hover" id="history"> <thead> <tr> <th>RATE</th> <th>QUANTITY</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>

如何覆蓋 HTML 數據表上的數據？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-24 14:11:40

如何覆蓋 HTML 數據表上的數據？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-24 14:11:40

解決方案1
1 已采納 2020-04-24 14:11:40