javascript写九九乘法表
· 阅读需 2 分钟
九九乘法表是学习 JavaScript 循环、字符串拼接和 DOM 操作的经典练习。外层循环控制行数，内层循环控制每一行需要显示多少个算式。
控制台输出九九乘法表
for (let row = 1; row <= 9; row++) {
const expressions = [];
for (let column = 1; column <= row; column++) {
expressions.push(
`${column} × ${row} = ${column * row}`
);
}
console.log(expressions.join("\t"));
}
当 row 等于 5 时，内层循环从 1 执行到 5，因此第五行会输出 5 个乘法算式。
在网页中生成表格
<table id="multiplication-table"></table>
<script>
const table = document.querySelector("#multiplication-table");
for (let row = 1; row <= 9; row++) {
const tr = document.createElement("tr");
for (let column = 1; column <= row; column++) {
const td = document.createElement("td");
td.textContent = `${column} × ${row} = ${column * row}`;
tr.appendChild(td);
}
table.appendChild(tr);
}
</script>
这里使用 textContent 写入算式，不需要拼接 HTML，也可以避免内容被浏览器当成标签解析。
添加表格样式
#multiplication-table {
border-collapse: collapse;
}
#multiplication-table td {
min-width: 110px;
padding: 8px 12px;
border: 1px solid #4caf50;
font-weight: 600;
text-align: center;
}
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript 九九乘法表</title>
<style>
table {
border-collapse: collapse;
}
td {
min-width: 110px;
padding: 8px;
border: 1px solid #4caf50;
}
</style>
</head>
<body>
<table id="multiplication-table"></table>
<script>
const table = document.querySelector("#multiplication-table");
for (let row = 1; row <= 9; row++) {
const tr = document.createElement("tr");
for (let column = 1; column <= row; column++) {
const td = document.createElement("td");
td.textContent =
`${column} × ${row} = ${column * row}`;
tr.appendChild(td);
}
table.appendChild(tr);
}
</script>
</body>
</html>
旧代码中常见的 document.write 会在页面加载完成后覆盖现有文档，不适合实际项目。使用 DOM API 可以更安全地控制插入位置和样式。