如何根据后端响应数据匹配HTML表格元素并动态修改CSS样式

你用这段代码生成了一个12行10列的HTML表格（每个单元格的class对应1到120的数字）：

for (var i = 0; i < 12; i++) { 
  var row = $('<tr>').appendTo("#zoning tbody"); 
  for (var j = 1; j < 11; j++) { 
    $(`<td class=${i * 10 + j}>${i * 10 + j}</td>`).appendTo(row); 
  }
}

你的需求很明确：

• 当后端响应里的数字和表格单元格的class匹配时，给单元格设置对应背景色，再根据delivery_avg的值设置不同的边框样式
• 没出现在响应里的单元格，统一设置为灰色背景+细黑边框

看你写的代码，主要有几个逻辑和语法问题：

1. 嵌套的else存在语法错误（多了一个无效的else分支）
2. 使用return会直接终止$.each循环，导致后续的单元格处理被中断
3. 样式切换的顺序不对，应该先统一重置所有单元格，再处理匹配项

下面是修正后的完整代码，我会逐段解释逻辑：

function updateTable() {
  // 第一步：先把所有单元格重置为默认的灰色样式，清除标记类
  $('td').css({
    'background-color':'#8F8F8F',
    'border-color':'black',
    'border-width':'thin'
  }).removeClass('coloured');

  // 第二步：请求后端数据
  $.get('php/test2.php', function(response) {
    console.log('后端响应数据:', response);

    // 第三步：遍历响应里的每一项，处理匹配的单元格
    $.each(response, function(index, item) {
      var targetTd = $(`td.${item.beacon}`);
      // 先设置响应指定的背景色，标记为已处理
      targetTd.css({
        'background-color': item.location,
        'border-color':'black',
        'border-width':'thin'
      }).addClass('coloured');

      // 根据delivery_avg的值设置对应边框样式
      var avg = item.delivery_avg;
      if (avg <= 4.00) {
        targetTd.css({'border-color': 'lime','border-width': 'thick'});
      } else if (avg >= 4.01 && avg <= 7.00) {
        targetTd.css({'border-color': 'orange','border-width': 'thick'});
      } else if (avg >= 7.01 && avg <= 10.00) {
        targetTd.css({'border-color': 'pink','border-width': 'thick'});
      } else if (avg >= 10.01) {
        targetTd.css({'border-color': 'red','border-width': 'thick'});
      }
      // 无需额外else，因为开头已经重置了默认样式
    });

    // 可选：查看未匹配的单元格数量，用于调试
    var unMatchedTds = $('td:not(.coloured)');
    console.log('未匹配的单元格数量:', unMatchedTds.length);
  });
}

// 每5秒自动更新一次表格
var updateTableInterval = setInterval(updateTable, 5000);

关键逻辑说明： #

• 先统一重置样式：每次更新表格时，先把所有单元格恢复到默认灰色状态，这样就算之前匹配过的单元格，若本次响应中没有，会自动变回灰色，无需额外判断。
• 遍历响应处理匹配项：对每个响应里的item.beacon，找到对应单元格后先设置背景色，再根据delivery_avg的值调整边框。这里不要用return，否则会直接终止循环，导致后续的响应项无法被处理。
• 去掉无效else分支：因为开头已经完成了全局样式重置，未被响应匹配的单元格自然保持默认灰色样式，不需要在循环里额外处理。

这样修改后，就能完美实现你想要的效果：响应中存在的数字对应单元格会显示指定背景色+对应边框，未出现的数字对应单元格保持灰色细边框。

内容的提问来源于stack exchange，提问作者Avalon Parkes-barton