JavaScript如何为动态生成的表格添加表头

你只需要在原有表格拼接逻辑中，提前拼接表头段的内容即可，同时原代码存在冗余标签、ID重复、执行时机错误的问题，同步修复后的完整代码如下：

"use strict";

// 函数定义
const creerTableau = () => {
    // 校验用户输入的行数列数必须是正整数
    let nombreLignes = parseInt(prompt("请输入表格行数："));
    while (isNaN(nombreLignes) || nombreLignes <= 0) {
        nombreLignes = parseInt(prompt("输入无效，请重新输入正整数的表格行数："));
    }
    let nombreColonnes = parseInt(prompt("请输入表格列数："));
    while (isNaN(nombreColonnes) || nombreColonnes <= 0) {
        nombreColonnes = parseInt(prompt("输入无效，请重新输入正整数的表格列数："));
    }

    // 拼接表格开头
    let tableHtml = '<table id="tableauID" border="1">\n';
    // 拼接表头部分
    tableHtml += '<thead><tr>\n';
    for (let j = 0; j < nombreColonnes; j++) {
        tableHtml += `<th>表头${j + 1}</th>`;
    }
    tableHtml += '<th>操作</th>\n'; // 最后加操作列的表头
    tableHtml += '</tr></thead>\n';

    // 拼接表格主体部分
    tableHtml += '<tbody>\n';
    for (let i = 0; i < nombreLignes; i++) { 
        tableHtml += '<tr>\n';
        for (let j = 0; j < nombreColonnes; j++) { 
            tableHtml += '<td>';
            tableHtml += '内容 ' + i + ',' + j;
            tableHtml += '</td>';
        }
        // 操作列按钮，增加行索引避免ID重复
        tableHtml += '<td>';
        tableHtml += `<button id="modifier-${i}">修改</button>`;
        tableHtml += `<button id="supprimer-${i}">删除</button>`;
        tableHtml += '</td>';
        tableHtml += '</tr>\n';
    }
    tableHtml += '</tbody></table>';

    // 渲染到页面
    document.getElementById('body-div').innerHTML = tableHtml;
}
// 页面加载完成后执行函数
window.onload = creerTableau;

主要修改点说明 #

• 新增表头生成逻辑：在表格主体前拼接<thead>标签段，根据输入的列数生成对应表头项，最后补充操作列的表头
• 移除原代码中冗余的</th>无效标签，避免DOM渲染异常
• 修复按钮ID重复问题：给每行的操作按钮增加行索引作为唯一标识，避免后续绑定事件时出现异常
• 修复执行时机错误：原代码window.onload = creerTableau()是直接执行函数赋值返回值，改成window.onload = creerTableau赋值函数引用，保证页面DOM加载完成后再执行逻辑
• 增加输入校验：避免用户输入非正整数导致表格生成异常

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