JavaScript用代码生成表格
时间: 2023-05-21 16:04:11 浏览: 168
可以使用以下代码生成表格:
```javascript
// 创建一个表格元素
var table = document.createElement("table");
// 创建表头
var headerRow = table.insertRow(0);
var headerCell1 = headerRow.insertCell(0);
var headerCell2 = headerRow.insertCell(1);
headerCell1.innerHTML = "<b>姓名</b>";
headerCell2.innerHTML = "<b>年龄</b>";
// 创建表格内容
var row1 = table.insertRow(1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
cell1.innerHTML = "张三";
cell2.innerHTML = "25";
var row2 = table.insertRow(2);
var cell3 = row2.insertCell(0);
var cell4 = row2.insertCell(1);
cell3.innerHTML = "李四";
cell4.innerHTML = "30";
// 将表格添加到页面中
document.body.appendChild(table);
```
这段代码会创建一个包含姓名和年龄的表格,并将其添加到页面中。
相关问题
用for写九九乘法表javascript编程代码带表格
以下是用JavaScript编写九九乘法表的代码,包含HTML表格格式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
border: 1px solid #000;
width: 40px;
height: 40px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table id="multiplication-table">
</table>
<script>
const table = document.getElementById('multiplication-table');
for (let i = 1; i <= 9; i++) {
const row = document.createElement('tr');
for (let j = 1; j <= i; j++) {
const cell = document.createElement('td');
cell.textContent = `${j}×${i}=${i * j}`;
row.appendChild(cell);
}
table.appendChild(row);
}
</script>
</body>
</html>
```
这段代码的说明:
1. 我们创建了一个基本的HTML结构,包含一个表格元素。
2. 在<style>标签中,我们添加了一些简单的CSS样式,使表格看起来更整洁。
3. 在JavaScript部分,我们首先获取表格元素。
4. 然后,我们使用两个嵌套的for循环来生成九九乘法表的内容:
- 外层for循环控制行数(1到9)。
- 内层for循环控制每行中的单元格数,从1开始,到当前行数结束。
5. 在内层循环中,我们创建一个<td>元素,设置其文本内容为乘法表达式(例如,"2×3=6"),然后将其添加到当前行。
6. 每次外层循环结束后,我们将创建的行添加到表格中。
7. 最后,浏览器会自动渲染这个表格,显示完整的九九乘法表。
这个方法使用JavaScript动态生成表格内容,使得代码更加灵活,易于修改或扩展。
阅读全文
相关推荐















