取出网页的数据制成表格
时间: 2024-02-17 18:10:41 浏览: 20
要取出网页的数据制成表格,可以使用JavaScript和HTML来实现。下面是一个基本的示例代码:
HTML代码:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
JavaScript代码:
```javascript
//模拟获取数据
const data = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 25 },
{ name: '赵六', age: 30 }
];
//获取表格元素
const table = document.getElementById('myTable');
//获取tbody元素
const tbody = table.getElementsByTagName('tbody')[0];
//循环数据并渲染表格
for(let i = 0; i < data.length; i++) {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.innerText = data[i].name;
td2.innerText = data[i].age;
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
}
```
在这个示例中,我们首先定义了一个数组data来模拟获取的数据。然后,通过JavaScript代码获取了表格元素和tbody元素,并循环数据并渲染表格。在循环中,我们使用createElement方法创建了tr、td元素,并使用innerText属性将数据渲染到td元素中,最后将td元素添加到tr元素中并将tr元素添加到tbody元素中,完成了表格的渲染。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)