用js循环做个四行五列的表格
时间: 2023-06-02 07:05:49 浏览: 162
js 添加、删除行
好的,请看下面的代码:
```
<table>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
<td>行1列4</td>
<td>行1列5</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
<td>行2列4</td>
<td>行2列5</td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
<td>行3列3</td>
<td>行3列4</td>
<td>行3列5</td>
</tr>
<tr>
<td>行4列1</td>
<td>行4列2</td>
<td>行4列3</td>
<td>行4列4</td>
<td>行4列5</td>
</tr>
</tbody>
</table>
```
你可以使用JavaScript来生成以上的HTML代码:
```javascript
const table = document.createElement('table');
const tbody = document.createElement('tbody');
for (let i = 0; i < 4; i++) {
const tr = document.createElement('tr');
for (let j = 0; j < 5; j++) {
const td = document.createElement('td');
td.innerText = `行${i + 1}列${j + 1}`;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
console.log(table.outerHTML);
```
这段代码将生成与上面相同的HTML表格代码。
阅读全文