本文將介紹如何使用 Ajax 修改 HTML 表格。Ajax（Asynchronous JavaScript and XML）是一種用于創建動態網頁的技術，可以實現異步加載和向服務器發送請求，無需刷新整個頁面。在許多網頁應用中，表格是一種常見的元素，我們通常需要在不重新加載整個頁面的情況下，通過 Ajax 來修改和更新表格。
首先，讓我們考慮一個簡單的例子。假設我們有一個包含學生信息的表格，其中包括學生的姓名、學號和成績。我們希望能夠通過點擊某個按鈕，使用 Ajax 請求服務器獲取最新的成績數據并更新表格。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function updateTable() {
$.ajax({
url: "update_scores.php",
method: "GET",
success: function(data) {
// 在這里解析服務器返回的數據，并更新表格
$("#scoreTable").html(data);
}
});
}
</script>
</head>
<body>
<button onclick="updateTable()">更新表格</button>
<table id="scoreTable">
<tr>
<th>姓名</th>
<th>學號</th>
<th>成績</th>
</tr>
<tr>
<td>張三</td>
<td>001</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>92</td>
</tr>
</table>
</body>
</html>在上面的例子中，我們引入了 jQuery 庫，并使用其中的 Ajax 功能。點擊按鈕時，調用了一個名為 "updateTable" 的 JavaScript 函數。該函數通過 Ajax 向服務器發送 GET 請求，并期望服務器返回最新的成績數據。當請求成功返回后，成功回調函數會被觸發，我們可以在其中解析服務器返回的數據并更新表格。
為了演示方便，我們在成功回調函數中直接使用了 "html" 函數來更新表格。事實上，你可以根據實際需求進行更復雜的數據操作，例如使用循環將數據添加為新的表格行，或者使用 jQuery 的其他 DOM 操作來動態修改表格。
上面的例子中，我們使用了一個假設的服務器接口地址 "update_scores.php"，你可以根據實際情況將其替換為你自己的服務器接口地址。另外，也可以根據實際需要修改請求的方法（如 POST）和數據格式（如 JSON）。
在實際開發中，你可能會遇到更復雜的表格操作需求。例如，你可能需要根據用戶輸入的條件動態篩選表格數據，或者實現排序和分頁功能。這些都可以通過 Ajax 來實現。總之，使用 Ajax 修改表格可以提升用戶體驗，使網頁更加靈活和動態。