循环遍历HTML表并使用AJAX GET更新值

基础概念

循环遍历HTML表格：指的是使用JavaScript或其他脚本语言遍历HTML中的表格元素，通常是为了读取或修改表格中的数据。

AJAX GET请求：AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。GET请求是一种HTTP请求方法，用于从服务器检索特定资源。

类型与应用场景

类型：

同源策略下的AJAX请求。
跨域资源共享（CORS）下的AJAX请求。

应用场景：

实时搜索建议。
动态加载评论或帖子。
在线表单验证。
实时股票价格更新。

示例代码

以下是一个简单的示例，展示如何使用JavaScript循环遍历HTML表格，并通过AJAX GET请求更新表格中的值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Update Table with AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<table id="dataTable" border="1">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>30</td>
  </tr>
  <!-- More rows as needed -->
</table>

<script>
$(document).ready(function(){
  $('#dataTable tr').each(function(index){
    if (index > 0) { // Skip header row
      var id = $(this).find('td:first').text();
      $.ajax({
        url: 'update.php?id=' + id, // Replace with your server-side script URL
        type: 'GET',
        success: function(response) {
          var data = JSON.parse(response);
          $(this).find('td:nth-child(2)').text(data.name);
          $(this).find('td:nth-child(3)').text(data.age);
        }.bind(this), // Maintain this context
        error: function(xhr, status, error) {
          console.error("AJAX Error: " + status + error);
        }
      });
    }
  });
});
</script>

</body>
</html>