如何基于block_id为动态生成的表格行设置背景色？

方式一：生成行时直接设置背景色 #

可以先维护一个对象缓存每个block_id对应的颜色，避免相同id用不同颜色。生成表格行的时候，给行标记block_id，然后分配对应颜色：

// 缓存block_id与颜色的映射，避免重复分配
const blockColorMap = {};
// 预设一批区分度高的浅色调，避免影响文字可读性
const presetColors = ['#f0f8ff', '#ffe4e1', '#e6e6fa', '#fafad2', '#e0ffff'];
let colorIndex = 0;

// 原有生成行的代码，新增颜色设置逻辑
var $tr = $('<tr>')
  // 给行添加data属性，方便后续识别block_id
  .data('block-id', item.trade_details["block_id"])
  .append(
    $('<td>').text(item.trade_details["trade_type"]),
    $('<td>').text(item.trade_details["quantity"]),
    $('<td>').text(item.trade_details["security_id"]),
    $('<td>').text(item.trade_details["price"]),
    $('<td>').text(item.trade_details["portfolio_name"]),
    $('<td>').text(item.trade_details["block_id"])
  );

// 给当前行分配背景色
const blockId = item.trade_details["block_id"];
if (!blockColorMap[blockId]) {
  // 循环使用预设颜色
  blockColorMap[blockId] = presetColors[colorIndex % presetColors.length];
  colorIndex++;
}
$tr.css('background-color', blockColorMap[blockId]);

$("#" + table_name + " tbody").append($tr);

方式二：表格渲染完成后批量处理 #

如果表格已经渲染完毕，也可以事后遍历所有行统一设置：

const blockColorMap = {};
const presetColors = ['#f0f8ff', '#ffe4e1', '#e6e6fa', '#fafad2', '#e0ffff'];
let colorIndex = 0;

// 遍历表格 tbody 下的所有行
$("#" + table_name + " tbody tr").each(function() {
  const $row = $(this);
  // 假设最后一列是block_id，可根据实际列位置调整索引
  const blockId = $row.find('td:last').text();
  
  if (!blockColorMap[blockId]) {
    blockColorMap[blockId] = presetColors[colorIndex % presetColors.length];
    colorIndex++;
  }
  $row.css('background-color', blockColorMap[blockId]);
});

进阶：用CSS类代替直接设置样式 #

如果想更便于维护样式，可以定义CSS类，给不同block_id的行添加对应类：

先写CSS：

.bg-block-1 { background-color: #f0f8ff; }
.bg-block-2 { background-color: #ffe4e1; }
.bg-block-3 { background-color: #e6e6fa; }
.bg-block-4 { background-color: #fafad2; }
.bg-block-5 { background-color: #e0ffff; }

再修改JS逻辑：

const blockClassMap = {};
let classIndex = 1;

var $tr = $('<tr>')
  .data('block-id', item.trade_details["block_id"])
  .append(
    $('<td>').text(item.trade_details["trade_type"]),
    $('<td>').text(item.trade_details["quantity"]),
    $('<td>').text(item.trade_details["security_id"]),
    $('<td>').text(item.trade_details["price"]),
    $('<td>').text(item.trade_details["portfolio_name"]),
    $('<td>').text(item.trade_details["block_id"])
  );

const blockId = item.trade_details["block_id"];
if (!blockClassMap[blockId]) {
  blockClassMap[blockId] = `bg-block-${classIndex}`;
  classIndex++;
  // 循环复用类，避免类数量不够
  if (classIndex > 5) classIndex = 1;
}
$tr.addClass(blockClassMap[blockId]);

$("#" + table_name + " tbody").append($tr);

内容的提问来源于stack exchange，提问作者Chatra