如何使用JQuery读取XML数据并展示到表格？含问题与需求

我来帮你梳理下当前代码的问题，并给出完整的修复方案，你的需求是把XML数据展示成3列多行的表格，同时能自动加载新XML文件替换旧数据，现在的问题主要来自DOM结构不规范、HTML标签错误、数据处理逻辑不当这几个方面：

问题诊断 #

1. 表格结构不规范：原HTML里的<th>直接放在<table>下，没有包裹在<thead>的<tr>中，加上初始空的<tr>，导致DOM结构混乱，表头无法正常渲染。
2. HTML标签未闭合：JQuery里拼接的<td>都没有写</td>闭合标签，浏览器解析错误，导致显示原始XML数据而非渲染后的表格。
3. 数据行逻辑错误：所有<td>都追加到同一个初始<tr>里，导致所有数据挤在一行，无法形成每行一条数据的结构。
4. 固定加载指定XML：代码里硬编码了XML文件名，无法自动识别文件夹中的新文件，自然不能替换旧数据。
5. 数据清空逻辑有误：只清空单个<tr>的子元素，而不是所有数据行，旧数据可能残留。

修复后的完整代码 #

HTML 文件 #

<div>
  <table class="status_table">
    <!-- 表头单独放在thead里，避免被数据操作影响 -->
    <thead>
      <tr>
        <th class="table_heading">Heading 1</th>
        <th class="table_heading" style="text-align:center; padding:30px;">Heading 2</th>
        <th class="table_heading" style="text-align:center; padding:30px;">Heading 3</th>
      </tr>
    </thead>
    <!-- 数据行专门放在tbody里，方便清空和追加 -->
    <tbody id="table-body">
      <!-- 动态数据将插入这里 -->
    </tbody>
  </table>
</div>

JQuery 文件 #

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

$(document).ready(function(){
  // 页面加载完成后首次加载数据
  loadLatestTruckData();
  // 每1秒轮询一次（可根据需求调整间隔，100ms太频繁会影响性能）
  setInterval(loadLatestTruckData, 1000);
});

function loadLatestTruckData() {
  // 获取最新的XML文件名，这里需要根据你的实际情况实现逻辑
  // 比如通过后端接口返回最新文件，或者按时间戳规则生成
  const latestXmlUrl = getLatestXmlFileName();
  
  $.ajax({
    url: latestXmlUrl,
    dataType: "xml", // 必须指定为xml，否则会当作纯文本处理
    success: function(data){
      // 清空所有旧数据行
      $("#table-body").empty();
      
      // 遍历XML中的每个DisplayData节点
      $(data).find("DisplayData").each(function(){
        // 提取每个字段的值
        const laneName = $(this).find("LaneName").text().trim();
        const plateNumber = $(this).find("PlateNumber").text().trim();
        const bayName = $(this).find("BayName").text().trim();
        
        // 拼接完整的表格行，确保每个标签都闭合
        const tableRow = `
          <tr>
            <td class="table_content" style="color: #DB075C;">${laneName}</td>
            <td class="table_content" style="color: #FFFF00;">${plateNumber}</td>
            <td class="table_content" style="color: #3107DB;">${bayName}</td>
          </tr>
        `;
        
        // 将新行追加到tbody中
        $("#table-body").append(tableRow);
      });
    },
    error: function(xhr, status, error) {
      console.error("加载XML数据失败:", error);
    }
  });
}

function getLatestXmlFileName() {
  // 这里是获取最新XML文件的逻辑，示例中暂时返回你提供的文件名
  // 实际项目中，你可以：
  // 1. 后端提供接口返回文件夹中最新的XML文件名
  // 2. 如果文件名是时间戳格式，生成最近的时间戳尝试加载
  return "20200707083610.xml";
}

关键改进说明 #

• 规范表格DOM结构：用<thead>和<tbody>分离表头和数据行，确保表头不会被数据操作影响，浏览器渲染更稳定。
• 修复标签闭合问题：所有<td>都添加了闭合标签，解决了HTML解析错误导致的原始XML显示问题。
• 每行一条数据：每次循环生成一个完整的<tr>，包含三个对应字段的<td>，实现每行显示唯一数据的需求。
• 彻底清空旧数据：使用$("#table-body").empty()清空所有数据行，确保加载新数据时旧数据完全消失。
• 正确解析XML：AJAX请求指定dataType: "xml"，让JQuery正确解析XML节点，而不是当作纯文本处理。
• 优化轮询逻辑：用setInterval替代嵌套的setTimeout，避免内存泄漏，同时降低轮询频率（从100ms改为1000ms）减少性能消耗。
• 预留新文件检测逻辑：getLatestXmlFileName函数可以轻松扩展为自动获取最新XML文件的功能，满足“添加新XML文件时自动替换旧数据”的需求。

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