javascript - 使用 jQuery 更新表

Question

在服务器端，我每 3 秒发出数据库的最后 10 行；

setInterval(function() {
              connection.query("SELECT * FROM report ORDER BY id DESC limit 10", function(err, rows) {
                if (err) console.log(err);
                else {
                  console.log("Last 10 record emitted.");
                //  console.log("rows: " + JSON.stringify(rows, null, 3));
                  io.emit("last_list", rows)
                }
              });
            }, 3000);

在客户端，我将这些行附加到表中；

  socket.on('last_list', function(rows) {
    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];

      $('#myTable').append('<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' +
      row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' +
      row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' +
      row.adet + '</td></tr>');

    }
  });

我的问题是，如何更新表格而不是每 3 秒添加新行？

Answer 1

$('#myTable').empty();

只需将上面的列表添加为回调函数的第一行，即:

socket.on('last_list', function(rows) {
  $('#myTable').empty();
  //REST OF YOUR CODE AS IS HERE...
});

仅供引用:为了获得更好的性能，不要在每个循环中都更改 DOM。而是继续向变量添加行，而不是在循环后将其分配给您的表。 DOM 操作比变量昂贵。