如何用jQuery读取XML文件并生成主从结构嵌套HTML表格

需求说明 #

需要读取指定XML文件，生成包含学生主信息与选课详情的嵌套HTML表格，预期展示格式如下：

 学号  0001 
 姓名    May 
 课程代码    课程描述      学分   教授
 IPT              IPT              3         Jes
  WD               Web Devt         3         Mark
学号  0002
姓名    June 
课程代码    课程描述      学分     教授 
IPT              IPT              3           Jes

原始XML文件内容 #

<?xml version="1.0" encoding="UTF-8"?>
<enrollment>
    <student>
        <stud_no>0001</stud_no>
        <stud_name>May</stud_name>
            <enrollment_data>
                <subj_code>IPT</subj_code>
                <subj_desc>Integrative Programming and Technologies</subj_desc>
                <subj_units>3</subj_units>
                <professor>Jes</professor>
            </enrollment_data>
            <enrollment_data>
                <subj_code>WD</subj_code>
                <subj_desc>Web Devt</subj_desc>
                <subj_units>3</subj_units>
                <professor>Mark</professor>
            </enrollment_data>
    </student>
    <student>
        <stud_no>0002</stud_no>
        <stud_name>June</stud_name>
            <enrollment_data>
                <subj_code>IPT</subj_code>
                <subj_desc>Integrative Programming and Technologies</subj_desc>
                <subj_units>3</subj_units>
                <professor>Jes</professor>
            </enrollment_data>
    </student>
</enrollment>

原代码存在的问题 #

1. 请求方法错误：读取静态XML文件应使用GET而非POST
2. 选课数据查询范围错误：xml.find("enrollment_data")会遍历所有学生的选课记录，需改为仅查询当前学生节点下的选课数据
3. 表格结构不符合嵌套要求：未构建嵌套表格，学生信息行未做跨列处理，且标签未正确闭合
4. 表头与需求不匹配：原表头仅包含选课字段，需补充学生信息展示区域

修正后的完整代码 #

<!-- 调整后的主表格结构 -->
<table id="studentEnrollment" border="1">
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th colspan="4">选课详情</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$.ajax({
    url: "xml_sample2.xml",
    type: "GET",
    dataType: "xml", // 指定返回数据类型为XML，无需手动解析
    success: function(xml) {
        $(xml).find("student").each(function() {
            var studentNo = $(this).find("stud_no").text();
            var studentName = $(this).find("stud_name").text();
            
            // 创建学生信息行
            var studentRow = $("<tr>").append(
                $("<td>").text(studentNo),
                $("<td>").text(studentName),
                // 嵌套选课表格的单元格，跨4列
                $("<td colspan='4'>").append(function() {
                    // 创建选课子表格
                    var subTable = $("<table border='1'>").append(
                        $("<thead>").append(
                            $("<tr>").append(
                                $("<th>").text("课程代码"),
                                $("<th>").text("课程描述"),
                                $("<th>").text("学分"),
                                $("<th>").text("教授")
                            )
                        ),
                        $("<tbody>")
                    );
                    
                    // 填充当前学生的选课数据
                    $(this).find("enrollment_data").each(function() {
                        subTable.find("tbody").append(
                            $("<tr>").append(
                                $("<td>").text($(this).find("subj_code").text()),
                                $("<td>").text($(this).find("subj_desc").text()),
                                $("<td>").text($(this).find("subj_units").text()),
                                $("<td>").text($(this).find("professor").text())
                            )
                        );
                    });
                    
                    return subTable;
                })
            );
            
            // 将学生行添加到主表格
            $("#studentEnrollment tbody").append(studentRow);
        });
    },
    error: function(xhr, status, error) {
        console.error("读取XML失败:", error);
    }
});
</script>

修正要点说明 #

• 指定dataType: "xml"，jQuery会自动解析XML响应，无需手动调用$.parseXML
• 用$(this).find("enrollment_data")限定仅查询当前学生的选课记录，避免数据混乱
• 构建嵌套表格结构：学生信息行的第三单元格跨4列，内部包含独立的选课详情表格
• 补充错误处理函数，便于排查请求失败问题
• 统一使用jQuery的DOM创建方法（$("<tr>")等），避免拼接HTML字符串的语法错误

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