在js文件中录入的数据,如何在网页页面中用表格显示出来
时间: 2024-02-05 07:12:08 浏览: 128
可以通过JavaScript操作DOM元素来动态生成表格并将数据填充到表格中。以下是一种实现方式:
1. 在HTML页面中添加一个空的表格,例如:
```html
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
2. 在JavaScript文件中定义一个包含数据的数组,例如:
```javascript
var data = [
{ col1: '值1', col2: '值2', col3: '值3' },
{ col1: '值4', col2: '值5', col3: '值6' },
{ col1: '值7', col2: '值8', col3: '值9' },
];
```
3. 使用JavaScript操作DOM元素,动态生成表格并将数据填充到表格中,例如:
```javascript
var table = document.getElementById('myTable');
var tbody = table.getElementsByTagName('tbody')[0];
for (var i = 0; i < data.length; i++) {
var row = document.createElement('tr');
var col1 = document.createElement('td');
col1.innerHTML = data[i].col1;
row.appendChild(col1);
var col2 = document.createElement('td');
col2.innerHTML = data[i].col2;
row.appendChild(col2);
var col3 = document.createElement('td');
col3.innerHTML = data[i].col3;
row.appendChild(col3);
tbody.appendChild(row);
}
```
这段代码会循环遍历数据数组,每次创建一个新的表格行,并将数据填充到行中的单元格中,最后将行添加到表格的tbody元素中,从而生成一个包含数据的表格。
阅读全文