如何用原生JavaScript为Excel转HTML表格的每个td设置唯一ID

将Excel文件导入HTML表格，需为每个<td>设置唯一ID。目前已完成ID赋值，但存在ID重复问题，需用原生JavaScript解决。

现有脚本 #

document.getElementById("ex_file").onchange = (evt) => {
    var reader = new FileReader();

    reader.addEventListener("loadend", (evt) => {
        var table = document.getElementById("importexcel");
        table.innerHTML = "";

        var workbook = XLSX.read(evt.target.result, {type: "binary"}),
            worksheet = workbook.Sheets[workbook.SheetNames[0]],
            range = XLSX.utils.decode_range(worksheet["!ref"]);

        for (let row=range.s.r; row<=range.e.r; row++) {
            let r = table.insertRow();
            
            for (let col=range.s.c; col<=range.e.c; col++) {
                let c = r.insertCell(),
                    xcell = worksheet[XLSX.utils.encode_cell({r:row, c:col})];
                c.innerHTML = xcell.v;
                
                c.setAttribute('id', 'excel' + numbering)
                var numbering = 0;
                numbering++;
            }
        }
    });

    reader.readAsArrayBuffer(evt.target.files[0]);
};

当前Chrome开发者工具结果 #

<table id="importexcel" class="table">
<tbody>
<tr>
<td id="excelundefined">STYLE</td>
<td id="excel1">XS 90</td>
<td id="excel1">X 95</td>
<td id="excel1">M 100</td>
<td id="excel1">L 105</td>
<td id="excel1">XL 110</td>
<td id="excel1">XXL 115</td>
<td id="excel1">TOTAL</td>
</tr>
<tr>
<td id="excel1">hgfhgfhgf</td>
<td id="excel1">3</td>
<td id="excel1">4</td>
<td id="excel1">0</td>
<td id="excel1">4</td>
<td id="excel1">0</td>
<td id="excel1">4</td>
<td id="excel1">15</td>
</tr>
</tbody>
</table>

期望效果 #

<table id="importexcel" class="table">
<tbody>
<tr>
<td id="excelundefined">STYLE</td>
<td id="excel1">XS 90</td>
<td id="excel2">X 95</td>
<td id="excel3">M 100</td>
<td id="excel4">L 105</td>
<td id="excel5">XL 110</td>
<td id="excel6">XXL 115</td>
<td id="excel7">TOTAL</td>
</tr>
<tr>
<td id="excel8">hgfhgfhgf</td>
<td id="excel9">3</td>
<td id="excel10">4</td>
<td id="excel11">0</td>
<td id="excel12">4</td>
<td id="excel13">0</td>
<td id="excel14">4</td>
<td id="excel15">15</td>
</tr>
</tbody>
</table>

问题出在numbering变量的作用域和初始化时机：

1. 第一个<td>赋值ID时，numbering未定义，导致出现excelundefined
2. 每次循环<td>时都重新声明并初始化numbering为0，递增后始终是1，造成ID重复

修正后的代码：

document.getElementById("ex_file").onchange = (evt) => {
    var reader = new FileReader();

    reader.addEventListener("loadend", (evt) => {
        var table = document.getElementById("importexcel");
        table.innerHTML = "";

        var workbook = XLSX.read(evt.target.result, {type: "binary"}),
            worksheet = workbook.Sheets[workbook.SheetNames[0]],
            range = XLSX.utils.decode_range(worksheet["!ref"]);
        
        // 将numbering初始化在循环外部，保证全局递增
        let numbering = 0;

        for (let row=range.s.r; row<=range.e.r; row++) {
            let r = table.insertRow();
            
            for (let col=range.s.c; col<=range.e.c; col++) {
                let c = r.insertCell(),
                    xcell = worksheet[XLSX.utils.encode_cell({r:row, c:col})];
                c.innerHTML = xcell.v;
                
                // 先递增再赋值，避免第一个ID为excel0
                numbering++;
                c.setAttribute('id', 'excel' + numbering);
            }
        }
    });

    reader.readAsArrayBuffer(evt.target.files[0]);
};

修改说明：

• 将numbering的声明和初始化移到所有循环之外，确保变量在表格构建全程持续存在
• 调整赋值顺序：先递增numbering再设置ID，让第一个有效ID为excel1，匹配期望效果

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