js循环生成trtd标签
时间: 2023-10-04 20:08:49 浏览: 63
可以使用 JavaScript 循环生成 `<tr><td></td></tr>` 标签,例如:
```html
<table>
<tbody id="table-body"></tbody>
</table>
<script>
const tableBody = document.getElementById("table-body");
for (let i = 0; i < 5; i++) {
const tr = document.createElement("tr");
for (let j = 0; j < 3; j++) {
const td = document.createElement("td");
td.textContent = `Row ${i+1}, Column ${j+1}`;
tr.appendChild(td);
}
tableBody.appendChild(tr);
}
</script>
```
这段代码会生成一个 5 行 3 列的表格,每个单元格会显示它所在的行列信息。你可以根据实际需求修改循环次数和单元格内容。
相关问题
js用for循环生成表格
可以使用以下代码来使用 for 循环生成表格:
```html
<table>
<tbody>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<script>
for (let i = 0; i < 5; i++) {
document.write('<tr>');
document.write('<td>单元格' + i + '-1</td>');
document.write('<td>单元格' + i + '-2</td>');
document.write('<td>单元格' + i + '-3</td>');
document.write('</tr>');
}
</script>
</tbody>
</table>
```
上面的代码会生成一个包含 5 行 3 列的表格,可以根据需要修改行数和列数。在 for 循环中,使用 document.write() 方法来输出表格的每一行和每一个单元格。
js 循环动态生成table表格
可以使用 JavaScript 中的 DOM 操作来动态生成表格。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成表格</title>
</head>
<body>
<button onclick="createTable()">生成表格</button>
<div id="tableContainer"></div>
<script>
// 创建表格
function createTable() {
// 获取容器元素
let container = document.getElementById("tableContainer");
// 创建 table 元素
let table = document.createElement("table");
// 创建表头
let headerRow = document.createElement("tr");
let header1 = document.createElement("th");
let header2 = document.createElement("th");
header1.innerHTML = "姓名";
header2.innerHTML = "年龄";
headerRow.appendChild(header1);
headerRow.appendChild(header2);
table.appendChild(headerRow);
// 创建数据行
let dataRow1 = document.createElement("tr");
let data1_1 = document.createElement("td");
let data1_2 = document.createElement("td");
data1_1.innerHTML = "张三";
data1_2.innerHTML = "20";
dataRow1.appendChild(data1_1);
dataRow1.appendChild(data1_2);
table.appendChild(dataRow1);
let dataRow2 = document.createElement("tr");
let data2_1 = document.createElement("td");
let data2_2 = document.createElement("td");
data2_1.innerHTML = "李四";
data2_2.innerHTML = "22";
dataRow2.appendChild(data2_1);
dataRow2.appendChild(data2_2);
table.appendChild(dataRow2);
// 将表格添加到容器中
container.appendChild(table);
}
</script>
</body>
</html>
```
这个示例中,当用户点击“生成表格”按钮时,`createTable` 函数会被调用。该函数首先获取一个容器元素(`<div>`),然后创建一个 `<table>` 元素。接着,函数创建表头和数据行,并将它们添加到表格中。最后,将表格添加到容器中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)