如何显示带有 XML 文件中的主/详细信息的嵌套 HTML 表格

Question

我有这个 xml，我想使用 jQuery 读取/处理 XML 文件并将其放入像这样的嵌套表中

 学号0001
 姓名五月
 学科代码 说明 单位 教授
 IPT IPT 3 杰斯
  WD Web Devt 3 标记
学号0002
名字六月
学科代码 说明 单位 教授
IPT IPT 3 杰斯

这是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>

<table id="employee" border="1">
<thead>
<tr>
<th>Subject Code</th>
<th>Description</th>
<th>Units</th>
<th>Professor</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
 
<script>

   $.ajax({
        url: "xml_sample2.xml",
        type:"POST",    
        success: function(xml){
        alert(xml);
            //xml = $.parseXML(xml);
            xml = $(xml);
            student = xml.find("student");
            student.each(function(){
            var snum=$(this).find("stud_no").text();
            var name=$(this).find("stud_name").text();
            $("#employee tbody").append("<tr><td>"+ snum +"</td><td>"+ name +"</td>");
        
            details = xml.find("enrollment_data");
            details.each(function(){
                var scode=$(this).find("subj_code").text();
                var title=$(this).find("subj_desc").text();
                var units=$(this).find("subj_units").text();
                var prof=$(this).find("professor").text();
                    $("#employee tbody").append("<tr><td>"+ scode +"</td><td>"+ title +"</td><td>"+ units +"</td><td>"+ prof +"</td></tr>");
            });
            });
        }
    });
  
</script>

Answer 1

使用纯JS，你可以做如下的事情。

基本概念如下：首先，您的数据是 xml 格式，因此您应该使用 xml 解析器来解析它；这是 DOMParser() 的工作。接下来，要查询 xml 数据，您应该使用 xpath，它以 the document.evaluate() 方法 的形式合并在 JS 中。最后，您使用模板文字将搜索结果转换为 html，并使用insertAdjacentHTML()方法将它们插入到表中。

正如我提到的，我稍微改变了表格的结构，这样它（对我来说）更有意义，但你显然可以使用它并使用其他格式。

所以大家一起：

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>
`;
const docEval = (doc, expr, context) =>
  doc.evaluate(expr, context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

domdoc = new DOMParser().parseFromString(xml, "text/xml");
dest = document.querySelector("#theTable");
stus = docEval(domdoc, './/student', domdoc);

for (let i = 0; i < stus.snapshotLength; i++) {
let student = stus.snapshotItem(i);
  studNo = docEval(domdoc, ".//stud_no/text()", student);
  studName = docEval(domdoc, ".//stud_name/text()", student); 
  row = `<tr style="background-color:powderblue;">
     <td>${studNo.snapshotItem(0).textContent}</td>
     <td>${studName.snapshotItem(0).textContent}</td>
 </tr>`;
  dest.insertAdjacentHTML("beforeend", row);
  infos = docEval(domdoc, ".//enrollment_data", student);

  for (let i = 0; i < infos.snapshotLength; i++) {
    let entry = infos.snapshotItem(i);
    subjCode = docEval(domdoc, ".//subj_code/text()", entry);
    subjDesc = docEval(domdoc, ".//subj_desc/text()", entry);
    subjUnit = docEval(domdoc, ".//subj_units/text()", entry);
    prof = docEval(domdoc, ".//professor/text()", entry);
    row2 = `<tr style="background-color:yellow;">
      <td>${subjCode.snapshotItem(0).textContent}</td>
      <td>${subjDesc.snapshotItem(0).textContent}</td>
      <td>${subjUnit.snapshotItem(0).textContent}</td>
      <td>${prof.snapshotItem(0).textContent}</td>
   </tr>`;
    dest.insertAdjacentHTML("beforeend", row2);
  }

}

<html lang="en-US">
<link rel="stylesheet" href="https://edwardtufte.github.io/tufte-css/tufte.css" type="text/css">
<body>
<table id='theTable' border='1'><tr>
<td>id&CourseCode</td>
<td>Name&Subject</td>
<td>Units</td>
<td>Prof</td>
</tr></table>
</body>