<!DOCTYPE html>
<html>
<head>
<title>九九乘法表</title>
<style>
table { border-collapse: collapse; margin: 20px; }
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="tableContainer"></div>
<script>
function createMultiplicationTable() {
let html = '<table>';
for (let i = 1; i <= 9; i++) {
html += '<tr>';
for (let j = 1; j <= i; j++) {
html += `<td>${j}×${i}=${i*j}</td>`;
}
html += '</tr>';
}
html += '</table>';
document.getElementById('tableContainer').innerHTML = html;
}
// 页面加载完成后自动生成
window.onload = createMultiplicationTable;
</script>
</body>
</html>
效果说明:
1. 使用嵌套循环生成表格结构
2. 外层循环控制行数(1-9)
3. 内层循环控制每行的列数(第n行有n列)
4. 使用模板字符串拼接HTML
5. 通过CSS添加边框和间距
6. 自动在页面加载完成后执行
显示效果为阶梯式排列:
1×1=1
1×2=2 2×2=4
1×3=3 2×3=6 3×3=9
...
直到第9行
以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。
页:
[1]