JavaScript使用嵌套循环生成梯形乘法表
作者:代码拾荒时间:2026-10-29 08:51:02浏览:91
本文介绍利用JavaScript嵌套for循环结合HTML table标签生成梯形乘法表的方法。外层循环控制行数,内层循环根据当前行号决定列数,通过字符串拼接动态生成表格内容并输出到页面。
JavaScript梯形乘法表实现原理
本文通过具体实例展示如何使用JavaScript代码构建一个梯形排列的乘法表,供读者参考学习。
最终生成的页面效果如下图所示:

实现思路是利用HTML中的table、tr和td标签构建表格结构,并通过JavaScript的for循环语句动态生成行与列。核心逻辑在于使用两层嵌套循环:外层循环负责控制输出的行数,共执行9次;内层循环则根据外层循环的当前变量值来确定当前行应输出的列数。之所以内层循环条件依赖外层变量,是因为这符合梯形排列的规则,即第一行输出1个单元格,第二行输出2个,依此类推,从而形成梯形视觉效果。
完整的实现代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var str= "<table border=1 width=500 align=center>";
for(var a=1;a<=9;a++)
{
str +="<tr>";
for(b=1;b<=a;b++)
{
str +="<td>"+a+"×"+b+"="+a*b+"</td>";
}
str +="</tr>";
}
str +="</table>"
document.write(str);
</script>
</head>
<body>
</body>
</html>
希望上述内容能对您的JavaScript编程实践提供有益帮助。
作者最新文章
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
