写一个html和Javascript文件使页面输出9*9乘法表,注意:html和Javascript文件要分开写
时间: 2024-09-23 17:15:27 浏览: 18
当然可以。为了创建一个HTML文件显示9*9乘法表,并通过JavaScript动态填充表格,你可以按照下面的方式编写:
**HTML (index.html)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9x9乘法表</title>
<!-- 引入外部JavaScript文件 -->
<script src="multiplication_table.js"></script>
</head>
<body>
<table id="multiplicationTable" border="1">
<thead>
<tr>
<th></th>
<?php for ($i = 1; $i <= 9; $i++): ?>
<th><?php echo $i; ?></th>
<?php endfor; ?>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
```
**JavaScript (multiplication_table.js)**
```javascript
window.onload = function() {
var tableBody = document.querySelector('#multiplicationTable tbody');
for (var i = 1; i <= 9; i++) {
var row = document.createElement('tr');
for (var j = 1; j <= 9; j++) {
var cell = document.createElement('td');
cell.textContent = i + '*' + j + ' = ' + (i * j);
row.appendChild(cell);
}
tableBody.appendChild(row);
}
};
```
这个HTML文件引入了一个名为`multiplication_table.js`的外部JavaScript文件。在JavaScript中,我们使用`window.onload`事件等待页面加载完成,然后动态创建表格行和单元格,将乘法结果填写进去。
**相关问题--:**
1. 这段代码如何实现动态生成表格内容?
2. HTML文件为什么要引用外部JavaScript文件?
3. 如何优化这个脚本来提高性能?