如何在JavaScript中插入HTML表格？编写addMultiTable生成指定乘法表

没问题，我来帮你搞定这个乘法表的需求！下面是完整的实现方案，包含HTML结构和JavaScript函数，还加了点基础样式让表格更易读。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table</title>
    <style>
        /* 给表格加基础样式，让边框合并更美观 */
        table {
            border-collapse: collapse;
            margin-top: 15px;
        }
        td {
            border: 1px solid #ccc;
            padding: 8px 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Multiplication Table</h1>

    <script>
        function addMultiTable(rows, cols) {
            // 1. 获取标题元素，我们要把表格追加到它后面
            const heading = document.querySelector('h1');
            if (!heading) return; // 防止找不到标题的情况

            // 2. 创建table元素
            const table = document.createElement('table');

            // 3. 循环生成行和单元格
            for (let i = 1; i <= rows; i++) {
                const row = document.createElement('tr');
                for (let j = 1; j <= cols; j++) {
                    const cell = document.createElement('td');
                    // 计算乘法值，行号 × 列号
                    cell.textContent = `${i} × ${j} = ${i * j}`;
                    row.appendChild(cell);
                }
                table.appendChild(row);
            }

            // 4. 把表格追加到标题的后面
            heading.after(table);
        }

        // 调用函数，生成4行8列的乘法表
        addMultiTable(4, 8);
    </script>
</body>
</html>

代码细节解释 #

• 样式部分：加了border-collapse: collapse让表格边框合并，给单元格加内边距和浅灰色边框，提升表格的可读性，避免显得杂乱。
• addMultiTable函数逻辑：
  • 先通过document.querySelector('h1')获取标题元素，同时做了空值判断，防止页面结构变动导致找不到元素时报错。
  • 用document.createElement逐个创建table、tr、td元素，这种方式比直接拼接HTML字符串更安全，能避免潜在的XSS风险。
  • 两层循环分别生成行和列，单元格里不仅显示乘法结果，还保留了行号×列号=结果的表达式，让乘法表更直观易懂。
  • 用heading.after(table)把表格插入到标题的下一个位置，这是现代浏览器支持的便捷方法；如果需要兼容更老的浏览器，可以替换成heading.parentNode.insertBefore(table, heading.nextSibling)。

这样运行页面后，就能看到标题下方出现一个4行8列的清晰乘法表啦！

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