如何借助AJAX循环遍历XML文件数据动态生成表格

核心修改说明 #

1. 先将原HTML中<tbody>标签内的静态内容全部清空，改为由JS动态渲染
2. 新增单个全局函数renderStudentTable()，内部完成AJAX请求发送、XML数据解析遍历、表格行生成、点击事件绑定全流程
3. 页面加载完成后自动调用该函数即可实现效果

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        h1,
        tr,
        th {
            text-align: center;
        }
        button {
            background-color: white;
            border: 0px;
            cursor: pointer;
        }
    </style>
    <title>学生信息查询</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container col-sm-4">
        <h1 style="margin-bottom: 50px; text-align: center;">点击学生查看详情</h1>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <tbody id="studentTbody">
                <!-- 内容由JS动态生成 -->
            </tbody>
        </table>
    </div>
    <!-- 学生详情弹出框 -->
    <div class="modal fade" id="studentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">学生详情</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p><strong>学号：</strong><span id="modalNumber"></span></p>
                    <p><strong>姓名：</strong><span id="modalName"></span></p>
                    <p><strong>班级：</strong><span id="modalClass"></span></p>
                    <p><strong>专业：</strong><span id="modalMajor"></span></p>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 单个函数完成全流程逻辑
        function renderStudentTable() {
            const xhr = new XMLHttpRequest();
            // 此处替换为你的XML文件实际存储路径
            xhr.open('GET', 'students.xml', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 解析XML数据
                    const xmlDoc = xhr.responseXML;
                    const studentList = xmlDoc.getElementsByTagName('student');
                    const tbody = document.getElementById('studentTbody');
                    tbody.innerHTML = '';
                    // 循环遍历所有学生节点
                    for (let i = 0; i < studentList.length; i++) {
                        const number = studentList[i].getElementsByTagName('number')[0].textContent;
                        const name = studentList[i].getElementsByTagName('name')[0].textContent;
                        const stuClass = studentList[i].getElementsByTagName('sinif')[0].textContent;
                        const major = studentList[i].getElementsByTagName('bolum')[0].textContent;
                        // 生成表格行
                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td><button class="stu-btn" data-number="${number}" data-name="${name}" data-class="${stuClass}" data-major="${major}">${number}</button></td>
                            <td><button class="stu-btn" data-number="${number}" data-name="${name}" data-class="${stuClass}" data-major="${major}">${name}</button></td>
                        `;
                        tbody.appendChild(tr);
                    }
                    // 绑定点击弹出详情事件
                    document.querySelectorAll('.stu-btn').forEach(btn => {
                        btn.addEventListener('click', function() {
                            document.getElementById('modalNumber').textContent = this.dataset.number;
                            document.getElementById('modalName').textContent = this.dataset.name;
                            document.getElementById('modalClass').textContent = this.dataset.class;
                            document.getElementById('modalMajor').textContent = this.dataset.major;
                            $('#studentModal').modal('show');
                        })
                    })
                }
            }
            xhr.send();
        }
        // 页面加载完成后自动执行
        window.onload = renderStudentTable;
    </script>
</body>
</html>

注意事项 #

• 将你提供的XML文件保存为students.xml，和HTML文件放在同一目录下即可，若路径不同需要修改代码中xhr.open的第二个参数
• 必须在HTTP服务环境下运行该页面，本地直接打开HTML会因为浏览器跨域限制无法加载XML文件

内容的提问来源于stack exchange，提问作者EBG