JavaScript实现四种对称九九乘法表的For与While循环详解
本文介绍如何使用JavaScript的For和While两种循环结构，分别实现左下角、右下角、左上角和右上角四种对称形式的九九乘法表。通过嵌套循环控制行列输出，并借助HTML表格标签修正排版对齐问题，帮助开发者深入理解循环逻辑与DOM生成的结合应用。
引言与实现思路
使用多种编程语言均可实现九九乘法表。本文重点讲解在JavaScript中，如何利用For和While这两种常用循环结构，分别生成左下角、右下角、左上角和右上角四种对称形式的九九乘法表。该案例是练习循环基础的良好途径。由于纯文本输出排版难以整齐，文中通过构建HTML表格来确保乘法表的视觉对齐效果。
左下角梯形乘法表实现
第一种情况：生成左下角为直角梯形的乘法表。
使用For循环实现的代码如下：
document.write("<table width='' border='>");
for(var i=; i<=; i++){
document.write("<tr>");
for(var j=; j<=i; j++){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>"); 使用While循环实现的代码如下：
document.write("<table width='' border='>");
var i = ;
while(i<=){
document.write("<tr>");
var j = ;
while(j<=i){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j++;
}
document.write("</tr>");
i++;
}
document.write("</table>");对应的乘法表效果如下图所示：
右下角梯形乘法表实现
第二种情况：生成右下角为直角梯形的乘法表。
使用For循环实现的代码如下：
document.write("<table width='' border='>");
for(var i=; i<=; i++){
document.write("<tr>");
for(var n=i; n<; n++){
document.write("<td> </td>");
}
for(var j=i; j>=; j--){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");使用While循环实现的代码如下：
document.write("<table width='' border='>");
var i = ;
while(i<=){
document.write("<tr>");
var n = i;
while(n<){
document.write("<td> </td>");
n++;
}
var j = i;
while(j>=){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j--;
}
document.write("</tr>");
i++;
}
document.write("</table>");对应的乘法表效果如下图所示：
左上角梯形乘法表实现
第三种情况：生成左上角为直角梯形的乘法表。
使用For循环实现的代码如下：
document.write("<table width='' border='>");
for(var i=; i>=; i--){
document.write("<tr>");
for(var j=; j<=i; j++){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");使用While循环实现的代码如下：
document.write("<table width='' border='>");
var i = ;
while(i>=){
document.write("<tr>");
var j = ;
while(j<=i){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j++;
}
document.write("</tr>");
i--;
}
document.write("</table>");对应的乘法表效果如下图所示：
右上角梯形乘法表实现
第四种情况：生成右上角为直角梯形的乘法表。
使用For循环实现的代码如下：
document.write("<table width='' border='>");
for(var i=; i>=; i--){
document.write("<tr>");
for(var j=; j>=i; j--){
document.write("<td> </td>");
}
for(var j=i; j>=; j--){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");使用While循环实现的代码如下：
document.write("<table width='' border='>");
var i = ;
while(i>=){
document.write("<tr>");
var j = ;
while(j>=i){
document.write("<td> </td>");
j--;
}
var j = i;
while(j>=){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j--;
}
document.write("</tr>");
i--;
}
document.write("</table>");对应的乘法表效果如下图所示：
以上分享了利用JavaScript中常用的For和While循环，分别实现四种对称九九乘法表的方法，供参考学习。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19