如何在构建tbody时根据XML节点值为表格行分配CSS类？

完全明白你的需求——遍历XML结果集构建表格tbody，同时根据Percent Reporting的数值给每行分配对应的颜色类。这其实是很典型的“数据驱动UI样式”场景，我给你两种常见的实现思路，你可以根据自己的代码环境选择：

方案一：DOM元素创建方式（更安全，规避XSS风险） #

这种方式适合前端直接操作DOM的场景，步骤清晰且安全：

// 先获取目标tbody元素
const targetTbody = document.querySelector('#your-table tbody');

// 假设xmlResults是你拿到的XML节点集合
for (const node of xmlResults) {
  // 提取百分比值，注意转成数字（去掉百分号）
  const percentText = node.querySelector('PercentReporting').textContent.trim();
  const percentValue = parseFloat(percentText.replace('%', ''));

  // 确定行的类名
  let rowClass = '';
  if (percentValue > 90) {
    rowClass = 'green';
  } else if (percentValue > 70 && percentValue < 90) {
    rowClass = 'yellow';
  } else {
    rowClass = 'red';
  }

  // 创建表格行并设置类名
  const tableRow = document.createElement('tr');
  tableRow.classList.add(rowClass);

  // 构建单元格（示例添加两列，可根据实际需求扩展）
  // 名称列
  const nameCell = document.createElement('td');
  nameCell.textContent = node.querySelector('EntityName').textContent;
  tableRow.appendChild(nameCell);

  // 百分比列
  const percentCell = document.createElement('td');
  percentCell.textContent = percentText;
  tableRow.appendChild(percentCell);

  // 将行添加到tbody
  targetTbody.appendChild(tableRow);
}

方案二：HTML字符串拼接（更简洁，适合批量渲染） #

如果数据量不大或已做XSS防护，也可以用字符串拼接快速构建tbody内容：

let tbodyContent = '';

for (const node of xmlResults) {
  const percentText = node.querySelector('PercentReporting').textContent.trim();
  const percentValue = parseFloat(percentText.replace('%', ''));

  let rowClass = '';
  if (percentValue > 90) {
    rowClass = 'green';
  } else if (percentValue > 70 && percentValue < 90) {
    rowClass = 'yellow';
  } else {
    rowClass = 'red';
  }

  // 拼接行的HTML字符串
  tbodyContent += `
    <tr class="${rowClass}">
      <td>${node.querySelector('EntityName').textContent}</td>
      <td>${percentText}</td>
      <!-- 继续添加你的其他列 -->
    </tr>
  `;
}

// 把生成的内容插入到tbody
document.querySelector('#your-table tbody').innerHTML = tbodyContent;

关键注意点： #

1. 百分比数值转换：一定要把带百分号的字符串转成数字再做比较！直接用字符串比较会出问题（比如"100%"和"95%"字符串比较时，"100%"会被判定为小于"95%"，因为第一个字符'1'比'9'小）。
2. 边界值调整：我严格按照你的需求写的判断条件——>90为green，70<值<90为yellow，<70为red。如果需要调整边界（比如>=90算green），直接修改判断逻辑即可。
3. 容错处理：如果XML里的百分比可能是空或非数字，建议添加容错：

   if (isNaN(percentValue)) {
     // 给无效数据默认分配red类
     rowClass = 'red';
   }
   

4. XML节点匹配：确保querySelector里的标签名和你XML里的完全一致（XML区分大小写！），比如你的节点是<Percent_Reporting>，代码里就要写node.querySelector('Percent_Reporting')。

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