html如何刷新表格

要刷新HTML表格，可以使用JavaScript和AJAX技术，以下是一个简单的示例：

（图片来源网络，侵删）

1、创建一个HTML文件，包含一个表格和一个按钮，点击按钮时，将触发JavaScript函数以刷新表格数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>刷新表格示例</title>
</head>
<body>
    <h1>刷新表格示例</h1>
    <table id="myTable" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </table>
    <button onclick="refreshTable()">刷新表格</button>
    <script src="script.js"></script>
</body>
</html>

2、接下来，创建一个名为script.js的JavaScript文件，编写一个名为refreshTable的函数，这个函数将使用AJAX从服务器获取新数据，并更新表格内容。

function refreshTable() {
    // 创建一个新的XMLHttpRequest对象
    var xhttp = new XMLHttpRequest();
    // 设置请求方法和URL
    xhttp.open("GET", "get_data.php", true);
    // 设置响应类型为JSON
    xhttp.responseType = "json";
    // 当请求完成时执行的函数
    xhttp.onload = function() {
        if (this.status == 200) {
            // 获取表格元素
            var table = document.getElementById("myTable");
            // 清空表格内容
            table.innerHTML = "";
            // 添加表头
            table.innerHTML += "<tr><th>姓名</th><th>年龄</th></tr>";
            // 遍历返回的数据，添加新的行
            for (var i = 0; i < this.response.length; i++) {
                table.innerHTML += "<tr><td>" + this.response[i].name + "</td><td>" + this.response[i].age + "</td></tr>";
            }
        } else {
            alert("请求失败，状态码：" + this.status);
        }
    };
    // 发送请求
    xhttp.send();
}

3、创建一个名为get_data.php的PHP文件，用于从服务器获取新数据，这里我们只是简单地返回一些示例数据。

<?php
header('ContentType: application/json');
$data = array(
    array("name" => "张三", "age" => 25),
    array("name" => "李四", "age" => 30),
    array("name" => "王五", "age" => 28)
);
echo json_encode($data);
?>

现在，当你点击“刷新表格”按钮时，表格将使用AJAX从服务器获取新数据并更新。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/416684.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。

html如何刷新表格

发表回复