JavaScript 实现九九乘法表：基于 jQuery 的 DOM 生成方案

实现原理与目标

该方案旨在利用前端的循环逻辑生成数学运算结果，并通过 JavaScript 动态构建 HTML 结构。最终效果是在浏览器页面主体（body）中展示一个倒三角形状的九九乘法表。由于原生 JavaScript 对 DOM 元素的样式包裹较为繁琐，此处引入 jQuery 库来简化元素创建与插入过程。

准备条件

• 已引入 jQuery 脚本环境，确保全局变量 $ 可用。
• 开发环境支持标准的 ES5 及以上语法的 for 循环与变量声明。

代码实现步骤

第1步：定义外层循环控制行数

首先声明两个变量用于存储中间状态：

• sum：用于暂存单次乘法的计算结果。
• wite：用于拼接最终的显示字符串（如 3X4=12）。

接着初始化一个外层 for 循环，变量 i 从 1 递增到 9，代表乘法表的行数：

<script type="text/javascript">
    var sum = 0;
    var wite;
    for (var i = 1; i < 10; i++) {
        // ... 内部逻辑
    }
</script>

第2步：动态创建行容器并追加到页面

在每一次外层循环中，首先需要为当前行创建一个独立的 div 容器。为了便于区分，这里采用动态类名 class+i+ 进行标记：

var div = $('
');
$("body").append(div);

此步骤的目的是将新创建的空白行容器添加到当前页面的主体部分，确保后续生成的内容会正确显示在屏幕上。

第3步：内层循环计算并填充单元格

在当前行的容器内，使用内层 for 循环来处理具体的乘法项。注意，为了实现倒三角布局（即第一行有1个式子，最后一行有9个），内层循环的起始值为当前的行数 i，递减至 1：

for(var j = i; j > 0; j--){
    sum = j * i;
    wite = (j+"X"+i+"="+sum);
    div.prepend($(''+wite+''));
}

在这个循环体内执行以下关键操作：

1. 计算乘积：将当前行号 i 与列号 j 相乘，存入 sum。
2. 拼接文本：按照 [被乘数]X[乘数]=[积] 的格式拼接字符串。
3. 创建元素：使用 jQuery 创建一个带有右侧间距样式的 span 标签，内容为拼接好的公式。
4. 插入元素：重要逻辑点：此处使用了 prepend 方法。因为内层循环是从 i 递减到 1，先算的是大数（如第1行的 1X1），后算的是小数（若逻辑相反则顺序不同）。但在本段特定代码逻辑中，它通过 prepend 确保新生成的项放在最前面，配合 j 的递减逻辑形成特定的视觉排列。*

运行结果与验证

代码执行后，浏览器控制台无报错且页面无白屏时，即表示 DOM 结构已成功生成。观察页面主体，应能看到由 9 行组成的乘法表格。

上述代码清晰地展示了如何将业务逻辑（乘法计算）转化为视图数据（HTML结构）。通过调整内层循环的范围或使用的插入方法（如 append vs prepend），可以轻易改变乘法表的排版布局。以上就是基于 jQuery 实现九九乘法表的详细内容，更多关于 JavaScript DOM 操作与算法结合的资料请关注本站其它相关文章！