Javascript 使用jQuery更新表

在服务器端，我每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秒钟更新一次表而不是添加新行？

将数据保留在数组中。每次出现新数据时，将其附加到数组中，并使用更新的数据集重新渲染数组。像这样：

var data = []
var tableContainer = $('#myTable')

function renderTable() {
  tableContainer.innerHTML = data.map(function(row) {
    return '<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>'
  }).join('')
}

function updateData(newData) {
  newData.forEach(function(item) {
    data.push(item)
  })
}

socket.on('last_list', function(rows) {
  updateData(rows)
  renderTable()
});

---

将数据保存在数组中。每次出现新数据时，将其附加到数组中，并使用更新的数据集重新渲染数组。像这样：

var data = []
var tableContainer = $('#myTable')

function renderTable() {
  tableContainer.innerHTML = data.map(function(row) {
    return '<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>'
  }).join('')
}

function updateData(newData) {
  newData.forEach(function(item) {
    data.push(item)
  })
}

socket.on('last_list', function(rows) {
  updateData(rows)
  renderTable()
});

---

每次追加前清除表体。您可以给tbody一个ID并像$tbody.html一样清除它，也可以使用以下方法

socket.on('last_list', function(rows) {
$('#myTable tbody').html("");
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>');

}

---

})

每次追加前清除表体。您可以给tbody一个ID并像$tbody.html一样清除它，也可以使用以下方法

socket.on('last_list', function(rows) {
$('#myTable tbody').html("");
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>');

}

})

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

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

仅供参考：为了提高性能，不要每次循环都更改DOM。而是继续向变量添加行，然后在循环后将其分配给表。DOM操作比变量昂贵

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

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

仅供参考：为了提高性能，不要每次循环都更改DOM。而是继续向变量添加行，然后在循环后将其分配给表。DOM操作比变量昂贵。

您可以使用$.empty清除表中的内容，然后使用$.append或$.html放置html内容

此外，您还可以使用模板字符串（即backticks）更方便地创建多行html内容，而不是使用字符串和连接每个变量

函数generateTablerow{ 返回` ${row.id} ${row.fabrika} ${row.kumes} ${row.makina} ${row.kat} ${row.sol_sag} ${row.adet} ` } 变量行=[{ id:'1'， 法布里卡：“2”， 库姆斯：“3”， 马基纳：“4”， 凯特：“5”， 太阳弧垂：“6”， 阿黛特：“7” }, { id:'2'， 法布里卡：“3”， 库姆斯：“4”， 马基纳：“5”， 凯特：“6”， sol_凹陷：“7”， 阿黛特：“8” }] 设置超时=>{ $'table'。为空； $'table'.appendgenerateTablerows[0]； }, 1000 设置超时=>{ $'table'。为空； $'table'.appendgenerateTablerows[1]； }, 1000 您可以使用$.empty清除表的内容，然后使用$.append或$.html放置html内容

此外，您还可以使用模板字符串（即backticks）更方便地创建多行html内容，而不是使用字符串和连接每个变量

函数generateTablerow{ 返回` ${row.id} ${row.fabrika} ${row.kumes} ${row.makina} ${row.kat} ${row.sol_sag} ${row.adet} ` } 变量行=[{ id:'1'， 法布里卡：“2”， 库姆斯：“3”， 马基纳：“4”， 凯特：“5”， 太阳弧垂：“6”， 阿黛特：“7” }, { id:'2'， 法布里卡：“3”， 库姆斯：“4”， 马基纳：“5”， 凯特：“6”， sol_凹陷：“7”， 阿黛特：“8” }] 设置超时=>{ $'table'。为空； $'table'.appendgenerateTablerows[0]； }, 1000 设置超时=>{ $'table'。为空； $'table'.appendgenerateTablerows[1]； }, 1000

---

添加新行和更新表之间有什么区别？这是否意味着您要清除表并重新加载整个数据？@user1041953这正是我想要达到的目的。@erayaras但您当前的方法比每次清除表要好得多。它可能会使浏览器卡在CPU功耗较低的设备中。无论如何，为了在JS代码中消除内联HTML，最好使用像这样的模板引擎。添加新行和更新表之间有什么区别？这是否意味着您要清除表并重新加载整个数据？@user1041953这正是我试图实现的。@erayaras但您当前的方法比每次都清理桌子。它可能会让浏览器卡在CPU功耗较低的设备中。无论如何，最好使用类似的模板引擎，以消除JS代码中的内联HTML。