如何在JavaScript对象中查找指定键值对并为HTML表格行应用CSS

嘿，我来帮你搞定这个需求！咱们一步步实现从给定对象里找出id:'1001'的条目，然后给对应表格行加上背景色等样式，而且不用处理重复项。

第一步：处理目标数据 #

你给的对象是类数组结构，要是我们需要生成包含所有条目的表格（仅给符合条件的行加样式），直接遍历原对象的所有值就行——毕竟需求明确说不用处理重复项，所以所有条目都保留。如果只是单独筛选出目标条目，也可以用下面的代码先过滤：

var obj = { 
  0: {id:'1001',name:'john'}, 
  1: {id:'1002',name:'johnson'}, 
  2: {id:'1001',name:'jack'}, 
  3: {id:'1021',name:'mark'}, 
};

// 仅筛选出id为'1001'的条目（如果只需要展示这些的话）
const targetItems = Object.values(obj).filter(item => item.id === '1001');

第二步：生成带样式的HTML表格 #

这里给你两种实现方式，推荐用第一种（CSS类），方便后续维护样式：

方式一：使用CSS类（推荐） #

先定义好高亮行的CSS样式，按需自定义：

/* 自定义高亮样式，可根据需求修改颜色、字体等 */
.highlight-row {
  background-color: #e6f7ff; /* 淡蓝色背景 */
  color: #1890ff; /* 蓝色文字 */
  font-weight: 500;
}

然后用JavaScript动态生成表格，给符合条件的行添加这个类：

// 创建表格元素
const table = document.createElement('table');
table.setAttribute('border', '1'); // 给表格加边框，可选

// 创建表头
const headerRow = document.createElement('tr');
headerRow.innerHTML = '<th>ID</th><th>Name</th>';
table.appendChild(headerRow);

// 创建表体并添加行
const tbody = document.createElement('tbody');
Object.values(obj).forEach(item => {
  const row = document.createElement('tr');
  
  // 判断当前条目id是否为'1001'，是就加高亮类
  if (item.id === '1001') {
    row.classList.add('highlight-row');
  }
  
  row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
  tbody.appendChild(row);
});
table.appendChild(tbody);

// 把表格加到页面里，比如加到body中
document.body.appendChild(table);

方式二：行内样式（快速测试用） #

如果只是快速演示，不想单独写CSS类，也可以直接给行设置内联样式：

// 其他代码和上面一致，仅修改行的样式部分
Object.values(obj).forEach(item => {
  const row = document.createElement('tr');
  
  if (item.id === '1001') {
    row.style.backgroundColor = '#e6f7ff';
    row.style.color = '#1890ff';
    row.style.fontWeight = '500';
  }
  
  row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
  tbody.appendChild(row);
});

小提示 #

• 需求提到“无需处理重复项”，所以我们保留了所有原始条目，哪怕有相同id的也不会去重，只给符合条件的行加样式。
• 样式完全可以自定义，比如换成黄色背景、加粗字体，或者加个底部边框，都能通过CSS调整。

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