ajax拼接表格(示例代码)

1、使用Ajax拼接表格的过程如下：

我们需要先创建一个空的HTML表格，并给表格添加一个唯一的ID，以便后续的操作。然后，我们可以通过Ajax请求获取数据，并将数据拼接成表格的行和列。我们将拼接好的表格数据插入到HTML表格中，完成表格的拼接。

示例代码如下：

HTML部分：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据将在这里动态插入 -->
  </tbody>
</table>

JavaScript部分：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 发送Ajax请求
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取响应数据
    var data = JSON.parse(xhr.responseText);
    // 拼接表格数据
    var tableRows = '';
    data.forEach(function(item) {
      tableRows += '<tr>';
      tableRows += '<td>' + item.name + '</td>';
      tableRows += '<td>' + item.age + '</td>';
      tableRows += '<td>' + item.city + '</td>';
      tableRows += '</tr>';
    });
    // 将拼接好的表格数据插入到HTML表格中
    document.querySelector('#myTable tbody').innerHTML = tableRows;
  }
};
xhr.send();

2、上述示例代码中，首先我们创建了一个空的HTML表格，并给表格添加了一个ID为"myTable"。然后，我们使用XMLHttpRequest对象发送了一个GET请求，请求的数据源为"data.json"。当请求成功后，我们通过JSON.parse()方法将响应数据解析为一个数组。接着，我们使用forEach()方法遍历数组中的每个对象，将每个对象的属性值拼接为一个表格行，并将拼接好的表格行存储在变量tableRows中。我们使用innerHTML将拼接好的表格行插入到HTML表格的tbody中，完成了表格的拼接。