使用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秒添加新的行?

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

});

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

只要添加上面的列表作为你的callback函数的第一行,即:

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

仅供参考:为了获得更好的性能,请不要在每个循环中更改DOM。 相反,不要将行添加到variables,而是在循环之后将其分配给您的表。 DOM操作比variables要贵。

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

而不是使用string和连接每个variables,您可以使用template stringbackticks更方便地创build多媒体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> 

将数据保存在数组中。 每次新数据附加到数组中,并使用更新的数据集重新呈现您的数组。 喜欢这个:

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