如何一键自动生成可动态调整tr/th数量的HTML表格代码

下面是一个纯前端实现的工具，支持输入表格行（<tr>）和表头单元格（<th>）数量，一键生成包含指定外部资源引用的HTML代码，还能按需快速调整行/单元格数量：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML表格代码生成器</title>
    <!-- 示例外部CSS引用，可根据需求替换 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .generator-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .code-preview {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            white-space: pre-wrap;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="generator-container">
        <h2>表格代码生成器</h2>
        <div class="mb-3">
            <label for="rowCount" class="form-label">表格行（&lt;tr&gt;）数量：</label>
            <input type="number" id="rowCount" class="form-control" value="3" min="1">
            <button onclick="adjustCount('row', 1)" class="btn btn-sm btn-secondary mt-1">+1行</button>
        </div>
        <div class="mb-3">
            <label for="headerCount" class="form-label">表头单元格（&lt;th&gt;）数量：</label>
            <input type="number" id="headerCount" class="form-control" value="4" min="1">
            <button onclick="adjustCount('header', 1)" class="btn btn-sm btn-secondary mt-1">+1单元格</button>
        </div>
        <button onclick="generateHTML()" class="btn btn-primary">生成HTML代码</button>
        <div class="code-preview" id="codePreview"></div>
    </div>

    <!-- 示例外部JavaScript引用，可根据需求替换 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function adjustCount(type, delta) {
            const input = type === 'row' ? document.getElementById('rowCount') : document.getElementById('headerCount');
            input.value = parseInt(input.value) + delta;
        }

        function generateHTML() {
            const rowCount = parseInt(document.getElementById('rowCount').value);
            const headerCount = parseInt(document.getElementById('headerCount').value);
            
            // 构建表格部分代码
            let tableHTML = '<table class="table table-bordered">\n';
            for (let i = 0; i < rowCount; i++) {
                tableHTML += '  <tr>\n';
                for (let j = 0; j < headerCount; j++) {
                    tableHTML += `    <th>表头单元格 ${i+1}-${j+1}</th>\n`;
                }
                tableHTML += '  </tr>\n';
            }
            tableHTML += '</table>';

            // 完整HTML结构，包含外部资源引用
            const fullHTML = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动生成表格页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        ${tableHTML}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`;

            // 显示预览代码
            document.getElementById('codePreview').textContent = fullHTML;
        }

        // 页面加载时默认生成一次
        window.onload = generateHTML;
    </script>
</body>
</html>

功能说明 #

• 基础生成：输入行数和表头单元格数，点击「生成HTML代码」即可得到包含指定外部CSS/JS和对应表格结构的完整HTML代码
• 快速调整：点击「+1行」或「+1单元格」按钮，可直接增加对应数量，无需手动修改输入框数值
• 自定义资源：代码中的外部CSS/JS引用可直接替换为你需要的资源链接
• 实时预览：生成的代码会直接展示在预览区域，可一键复制使用

核心逻辑解析 #

1. 数量调整函数：adjustCount通过修改输入框的数值实现快速增减，保证数值始终大于等于1
2. 表格生成逻辑：通过双层循环动态拼接<tr>和<th>标签，自动填充单元格标识文本
3. 完整HTML拼接：将生成的表格代码嵌入到预设的HTML模板中，包含必要的元标签和外部资源引用

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