删除并创建和搜索并更新Jquery

Question

1. 说我有this HTML mockup。
2. 说我需要定期更新信息（Value标头），1s。应该对模型中的每个表执行此操作。我通过websocket以JSON格式获取数据。

问题是：更新表格中数据的最佳方法是什么？删除内容并创建新DOM元素或搜索DOM元素并更新其值？

Answer 1

最快的方法是在js中保持对DOM元素的引用 - 使用

创建每个元素

tableRefs[row][col]=document.createElement('td');

并保留对它的引用。然后只需通过

更新

tableRefs[row][col].innerHTML='yourDataHere';

除非您计划在古老/低性能设备上运行并且您的数据大约为100行，否则我不会担心性能。

Answer 2

我最终通过jquery进行选择器访问。 I updated the HTML mockup因为我忘了提到我可以很容易地识别出我必须通过类选择器更新的值。之前我有这个类选择器，但后来简化了模型以在这里提出问题。 A performance test在这里完成。 虽然this答案不适用于我的案例但完全有效。

更新值的有效代码是：

$('.values').each(function() {
  if ($(this).html() != " ") {
    $(this).text("UP1");
  }
});

您还可以将jquery查找缩小到特定表（HTML模型中的示例表）：

$('#tableWrap_group_1 .values').each(function() {
  if ($(this).html() != " ") {
    $(this).text("UP1");
  }
});