如何覆盖 HTML 数据表上的数据？答案

【问题标题】：How can i overwrite data on HTML Datatables?如何覆盖 HTML 数据表上的数据？
【发布时间】：2020-04-24 14:02:27
【问题描述】：

在模板上，我从 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 条记录的固定高度，因此每次收到新消息时，都会将消息附加到表格的 first 行，桌子第十位的信息消失了。有没有办法做到这一点？提前致谢。

【问题讨论】：

标签： javascript html jquery datatables

【解决方案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>

【讨论】：

感谢您的回答！我试过了，但它只会添加前 10 条记录，之后它不会附加任何内容，即使收到新消息也是如此
@Jack022 新消息可能会添加到表格的第一行。