动态生成HTML表格：优化JavaScript数据展示与导出

let output = '';
// 假设 totalBatches、z、prefix、A1、A2、B1、B2 等变量已定义
const final = totalBatches.reduce((AB, now, idx) => {
    let A1 = z(AB, 8);
    let A2 = z(AB + now / 2 - 1, 8);
    let B1 = z(AB + now / 2, 8);
    let B2 = z(AB + now - 1, 8);

    // 直接拼接HTML标签和行内样式
    output += `<tr><td>Batch ${z(idx + 1, 2)}A </td><td>${prefix} ${A1} </td><td>${prefix} ${A2}</td></tr>\n`;
    output += `<tr style="border-bottom: 1px solid black;"><td>Batch ${z(idx + 1, 2)}B </td><td>${prefix} ${B1} </td><td>${prefix} ${B2}</td></tr>\n`;
    return AB + now;
}, init);

// outputEl.innerHTML = output; // 用于显示在HTML页面

// 示例数据结构
let tableData = [];
// 假设 totalBatches、z、prefix、A1、A2、B1、B2 等变量已定义
totalBatches.reduce((AB, now, idx) => {
    let A1 = z(AB, 8);
    let A2 = z(AB + now / 2 - 1, 8);
    let B1 = z(AB + now / 2, 8);
    let B2 = z(AB + now - 1, 8);

    tableData.push({
        'batchInfo': `Batch ${z(idx + 1, 2)}A`,
        'startValue': `${prefix} ${A1}`,
        'endValue': `${prefix} ${A2}`,
    });
    tableData.push({
        'batchInfo': `Batch ${z(idx + 1, 2)}B`,
        'startValue': `${prefix} ${B1}`,
        'endValue': `${prefix} ${B2}`,
    });
    return AB + now;
}, init);

// 定义列头，其顺序决定了表格列的显示顺序，且与tableData对象的属性名一致
const columnHeaders = ['batchInfo', 'startValue', 'endValue'];

/**
 * 将JSON对象数组转换为HTML表格字符串。
 * @param {Array<Object>} jsonData 包含表格数据的对象数组，每个对象代表一行。
 * @param {Array<string>} colNames 包含列名的字符串数组，用于定义表头和数据访问顺序。
 * @returns {string} 完整的HTML表格字符串。
 */
function jsonToTable(jsonData, colNames) {
    let tableHtml = '';
    let headerRowHtml = '';

    // 生成表头 (<thead>)
    for (let i = 0; i < colNames.length; i++) {
        // 可以根据colNames映射到更友好的显示名称
        const displayColName = colNames[i]; // 简单示例，实际可做映射
        headerRowHtml += `<th>${displayColName}</th>`;
    }
    tableHtml += `<thead><tr>${headerRowHtml}</tr></thead>`;

    // 生成表体 (<tbody>)
    let bodyHtml = '<tbody>';
    for (let r = 0; r < jsonData.length; r++) {
        let rowData = jsonData[r];
        let rowHtml = '';

        // 应用交替行样式：每隔一行添加不同的样式
        // 这里使用行内样式作为示例，更推荐使用CSS类
        const rowStyle = r % 2 === 0 ? '' : ' style="background-color: #f2f2f2; border-bottom: 1px solid #ddd;"';

        for (let c = 0; c < colNames.length; c++) {
            const colName = colNames[c];
            // 确保数据存在，避免显示 'undefined'
            rowHtml += `<td>${rowData[colName] !== undefined ? rowData[colName] : ''}</td>`;
        }
        bodyHtml += `<tr${rowStyle}>${rowHtml}</tr>`;
    }
    bodyHtml += '</tbody>';

    return `<table>${tableHtml}${bodyHtml}</table>`;
}

// 调用函数生成HTML表格
const generatedTableHtml = jsonToTable(tableData, columnHeaders);

// 将生成的HTML显示在页面上
const outputEl = document.getElementById('yourOutputElementId'); // 假设页面中有一个ID为 'yourOutputElementId' 的元素
if (outputEl) {
    outputEl.innerHTML = generatedTableHtml;
}

// 对于Excel导出，通常也是将这个HTML字符串作为数据源进行处理
// 具体导出逻辑会因库或方法而异，但核心是提供了结构化的HTML

/* style.css */
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
/* 交替行颜色 */
tr:nth-child(even) {
    background-color: #f9f9f9;
}
/* 底部边框样式 */
.batch-b-row {
    border-bottom: 2px solid black; /* 更明显的底部边框 */
}

// ...
for (let r = 0; r < jsonData.length; r++) {
    let rowData = jsonData[r];
    let rowHtml = '';

    // 根据需要添加CSS类名
    let rowClasses = [];
    // 假设我们想让所有'Batch B'的行有特殊样式
    if (rowData.batchInfo && rowData.batchInfo.includes('B')) {
        rowClasses.push('batch-b-row');
    }
    // nth-child(even/odd) 可以通过CSS选择器自动处理，无需在JS中手动添加类
    const classAttr = rowClasses.length > 0 ? ` class="${rowClasses.join(' ')}"` : '';

    for (let c = 0; c < colNames.length; c++) {
        const colName = colNames[c];
        rowHtml += `<td>${rowData[colName] !== undefined ? rowData[colName] : ''}</td>`;
    }
    bodyHtml += `<tr${classAttr}>${rowHtml}</tr>`; // 注意这里不再有rowStyle变量，而是classAttr
}
// ...