js九九乘法表带表格
时间: 2023-09-13 22:03:07 浏览: 163
js实现华丽的九九乘法表效果
以下是使用 JavaScript 和 HTML 表格创建九九乘法表的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>九九乘法表</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid black;
padding: 5px;
text-align: center;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<script>
// 第一行表头
for (var i = 1; i <= 9; i++) {
document.write('<td>' + i + '</td>');
}
</script>
</tr>
<script>
// 九九乘法表
for (var i = 1; i <= 9; i++) {
document.write('<tr>');
document.write('<td>' + i + '</td>');
for (var j = 1; j <= 9; j++) {
document.write('<td>' + i*j + '</td>');
}
document.write('</tr>');
}
</script>
</table>
</body>
</html>
```
代码解释:
1. 使用 `<table>` 标签创建表格。
2. 使用 CSS 样式设置表格边框和单元格样式。
3. 使用 JavaScript 循环生成表头和表格数据。
4. 第一行表头循环输出数字 1 到 9。
5. 九九乘法表使用嵌套循环生成,外层循环控制行数,内层循环控制列数,计算乘积并输出到单元格中。
阅读全文