如何使用trHtML +=在将Json返回到表中使用if-else条件

// 假设这是从服务器获取的 JSON 数据
let jsonData = [
    { name: 'Item 1', status: 'active' },
    { name: 'Item 2', status: 'inactive' },
    { name: 'Item 3', status: 'pending' }
];

// 初始化 HTML 字符串
let trHTML = '';

// 遍历 JSON 数据并构建表格行
jsonData.forEach(item => {
    // 使用 if-else 条件来决定行的样式
    let rowClass = '';
    if (item.status === 'active') {
        rowClass = 'active-row';
    } else if (item.status === 'inactive') {
        rowClass = 'inactive-row';
    } else if (item.status === 'pending') {
        rowClass = 'pending-row';
    }

    // 构建表格行并添加到 HTML 字符串中
    trHTML += `<tr class="${rowClass}"><td>${item.name}</td><td>${item.status}</td></tr>`;
});

// 将构建好的 HTML 字符串插入到表格中
document.getElementById('myTable').innerHTML = trHTML;

.active-row {
    background-color: #cfc;
}

.inactive-row {
    background-color: #fcc;
}

.pending-row {
    background-color: #ffc;
}