如何覆盖HTML数据表上的数据?

在模板上,我从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条记录的固定高度,因此每次接收到新消息时,该消息都会附加到表的第一行,而该消息将位于表的第十位桌子消失了。有什么办法吗?提前致谢。

评论
  • uvero
    uvero 回复

    也许您的代码无法正常工作。

    如下更改。

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