使用 jQuery 更新表答案

【问题标题】：Update Table with jQuery使用 jQuery 更新表
【发布时间】：2018-01-21 10:34:37
【问题描述】：

在服务器端，我每 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 秒添加新行？

【问题讨论】：

新增行和更新表格有什么区别？
这是否意味着您要清除表格并重新加载整个数据？
@user1041953 这正是我想要实现的目标。
@erayaras 但您当前的方法比每次都清理桌子要好得多。它可能会使浏览器卡在 CPU 功率较低的设备中。
无论如何，最好使用像Mustache.js 这样的模板引擎，以便摆脱JS代码中的内联HTML。

标签： javascript jquery mysql node.js socket.io

【解决方案1】：

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

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()
});

【讨论】：

【解决方案2】：

您可以使用$().empty清除table的内容，然后使用$().append或$().html放置html内容。

除了使用字符串和连接每个变量之外，您还可以使用template string 即backticks 更方便地创建多行html内容。

function generateTable(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>
     `
}

var rows = [{
  id: '1',
  fabrika: '2',
  kumes: '3',
  makina: '4',
  kat: '5',
  sol_sag: '6',
  adet: '7'
}, {
  id: '2',
  fabrika: '3',
  kumes: '4',
  makina: '5',
  kat: '6',
  sol_sag: '7',
  adet: '8'
}]

setTimeout(() => {
  $('table').empty();
  $('table').append(generateTable(rows[0]));
}, 1000)

setTimeout(() => {
  $('table').empty();
  $('table').append(generateTable(rows[1]));
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
</table>

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

每次追加前清除表体。您可以给您的 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>');

}

});

【讨论】：