如何使用JavaScript为Excel导入生成的HTML表格新增Serial列

你只需要在渲染表格每一行的开头提前插入Serial列的内容即可，具体修改如下：

修改后的完整JavaScript代码 #

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

    if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
    {
        document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';
        excel_file.value = '';
        return false;
    }

    var reader = new FileReader();
    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event){
        // 新增：定义Serial列取值映射
        const serialMap = {'serial1': '8BQZ-CCSU-XY36', 'serial2': 'IEAJ-NVIS-VMKM'};
        var data = new Uint8Array(reader.result);
        var work_book = XLSX.read(data, {type:'array'});
        var sheet_name = work_book.SheetNames;
        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

        if(sheet_data.length > 0)
        {
            var table_output = '<table class="table table-striped table-bordered">';

            for(var row = 0; row < sheet_data.length; row++)
            {
                table_output += '<tr>';

                // 新增：插入第一列Serial内容
                if(row == 0) {
                    // 表头行插入Serial表头
                    table_output += '<th>Serial</th>';
                } else {
                    // 数据行按行号取对应serial值，无匹配时显示-兜底
                    const serialVal = serialMap[`serial${row}`] || '-';
                    table_output += `<td>${serialVal}</td>`;
                }

                // 原有其他列渲染逻辑不变
                for(var cell = 0; cell < sheet_data[row].length; cell++)
                {
                    if(row == 0)
                    {
                        table_output += '<th>'+sheet_data[row][cell]+'</th>';
                    }
                    else
                    {
                        table_output += '<td>'+sheet_data[row][cell]+'</td>';
                    }
                }

                table_output += '</tr>';
            }

            table_output += '</table>';
            document.getElementById('excel_data').innerHTML = table_output;
        }
        excel_file.value = '';
    }
});

核心修改说明 #

1. 新增serialMap变量存储你需要的Serial列对应取值
2. 在每一行的单元格渲染逻辑前，先插入第一列的Serial内容：表头行插入固定Serial字段，数据行按当前行号匹配对应取值
3. 加入了兜底逻辑，如果表格数据行数超过你定义的serial数量，对应行的Serial列会显示-，你可以根据实际需求调整兜底值

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