#HTML如何请求数据并动态添加到表格中？jQuery和你学一样简单！#

2024-01-09 23:50:34

如何用 HTML 和 jQuery 动态向表格添加数据？

在网站开发中，经常需要从服务器获取数据并将其显示在表格中。有两种主要方法可以实现这一点：原生 HTML 方法和 jQuery 方法。本文将深入探讨这两种方法，帮助您选择最适合您需求的方法。

原生 HTML 方法

原生 HTML 方法非常简单直接，不需要任何额外的库或框架。它使用 XMLHttpRequest 对象来与服务器通信，然后使用 DOM API 来操作表格。以下是使用原生 HTML 方法的步骤：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    data.forEach(function(row) {
      var tr = document.createElement('tr');
      var tdName = document.createElement('td');
      tdName.textContent = row.name;
      var tdAge = document.createElement('td');
      tdAge.textContent = row.age;
      var tdAddress = document.createElement('td');
      tdAddress.textContent = row.address;
      tr.appendChild(tdName);
      tr.appendChild(tdAge);
      tr.appendChild(tdAddress);
      document.getElementById('myTable').appendChild(tr);
    });
  }
};
xhr.send();
</script>
</body>
</html>

优点：

简单直接
不需要额外的库或框架

缺点：

繁琐，需要编写更多代码
对于复杂的数据结构，可能会变得很困难

jQuery 方法

jQuery 是一个流行的 JavaScript 库，提供了许多简化常见 Web 开发任务的方法。使用 jQuery，您可以更轻松地与服务器通信并操作 DOM。以下是使用 jQuery 方法的步骤：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>
$.getJSON('data.json', function(data) {
  $.each(data, function(index, row) {
    var tr = $('<tr>');
    var tdName = $('<td>').text(row.name);
    var tdAge = $('<td>').text(row.age);
    var tdAddress = $('<td>').text(row.address);
    tr.append(tdName).append(tdAge).append(tdAddress);
    $('#myTable').append(tr);
  });
});
</script>
</body>
</html>