如何在HTML中展示JSON多值字段并实现颜色控制？

你的DiskUsage字段是数组类型，但原代码错误地将其当作单个对象直接访问data.DiskUsage.FreeSpacePercent，导致无法读取有效数据，因此单元格为空。

1. 遍历DiskUsage数组，逐个处理每个磁盘的信息
2. 根据需求计算磁盘使用率（使用率 = 100 - 可用空间百分比），并按阈值设置对应颜色：
   • 使用率 ≥90%：红色（#ffcccc）
   • 70% ≤ 使用率 <90%：琥珀色（#ffeb99）
   • 使用率 <70%：绿色（#aaffaa）
3. 将每个磁盘的信息渲染到单元格中，用独立元素分隔不同磁盘

替换原代码中diskUsageCell相关的所有代码：

const diskUsageCell = row.insertCell(4);
// 清空单元格默认内容
diskUsageCell.innerHTML = '';

if (data.DiskUsage && Array.isArray(data.DiskUsage)) {
    data.DiskUsage.forEach(disk => {
        const diskDiv = document.createElement('div');
        // 计算使用率
        const freePercent = disk.FreeSpacePercent;
        const usagePercent = 100 - freePercent;
        // 设置显示文本，可按需调整显示内容
        diskDiv.textContent = `${disk.DriveLetter}: ${freePercent.toFixed(2)}% free (${usagePercent.toFixed(2)}% used)`;
        
        // 设置背景颜色
        if (usagePercent >= 90) {
            diskDiv.style.backgroundColor = '#ffcccc'; // 红色
        } else if (usagePercent >= 70) {
            diskDiv.style.backgroundColor = '#ffeb99'; // 琥珀色
        } else {
            diskDiv.style.backgroundColor = '#aaffaa'; // 绿色
        }
        // 优化显示样式
        diskDiv.style.padding = '2px 4px';
        diskDiv.style.margin = '2px 0';
        diskDiv.style.borderRadius = '3px';
        
        diskUsageCell.appendChild(diskDiv);
    });
} else {
    diskUsageCell.textContent = '无磁盘数据';
}

• 代码同时展示了可用率和使用率，你可以根据需求调整textContent的内容，比如只保留使用率信息
• 通过forEach遍历数组中的每个磁盘对象，为每个磁盘创建独立的div元素，确保所有磁盘数据都能展示
• 使用toFixed(2)保留两位小数，让数据显示更整洁

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