利用Ajax给table赋值
时间: 2023-10-12 10:12:47 浏览: 46
可以通过以下步骤利用Ajax给table赋值:
1. 创建一个空的table元素。
```html
<table id="myTable"></table>
```
2. 创建一个包含table数据的JSON对象。
```javascript
var data = {
"rows": [
{ "name": "Alice", "age": "20" },
{ "name": "Bob", "age": "25" },
{ "name": "Charlie", "age": "30" }
]
};
```
3. 在JavaScript中使用Ajax请求获取JSON数据。
```javascript
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
// 将获取到的数据渲染到table中
}
};
xhttp.open("GET", "data.json", true);
xhttp.send();
```
4. 将获取到的数据渲染到table中。
```javascript
var table = document.getElementById("myTable");
for (var i = 0; i < data.rows.length; i++) {
var row = table.insertRow(i);
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
nameCell.innerHTML = data.rows[i].name;
ageCell.innerHTML = data.rows[i].age;
}
```
以上代码假设JSON数据的格式为:
```json
{
"rows": [
{ "name": "Alice", "age": "20" },
{ "name": "Bob", "age": "25" },
{ "name": "Charlie", "age": "30" }
]
}
```
在实际应用中,可以根据具体需求修改代码中的数据格式和渲染逻辑。