如何修复网页表格读取XML数据时显示Undefined的问题？

问题场景 #

尝试用JavaScript读取XML文件并在网页表格中展示人员姓名和听证室信息，但页面加载后表格单元格显示undefined。已排查XML拼写与结构，也试过页面加载后执行JS的方案，问题仍未解决。

原JavaScript代码 #

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        var client;
        if (window.XMLHttpRequest)
        {
            client = new XMLHttpRequest();
        }
        else 
        {
            client = new ActiveXObject("Microsoft.XMLHTTP");
        }
        client.open('GET', 'TestData.xml', true);

        client.onload = function()  // Function to run when the file loads
        {
            // get the response XML
            var xmlDoc = client.responseXML;

            // get the list
            var hearings = xmlDoc.getElementsByTagName("hr");

            // get the container where you want to embed the table
            var container = document.getElementById("container");

            // Create a table and put the data inside it
            var tableString = "<table border = '1'>";
                for (i = 0; i < hearings.length; i++)
                {
                    tableString += "<tr><td>";
                    tableString += hearings[i].getElementsByTagName("name")[0].childNodes[0].nodValue;
                    tableString += "<tr><td>";
                    tableString += hearings[i].getElementsByTagName("hearing_room")[0].childNodes[0].nodValue;
                    tableString += "<tr><td>";
                    
                }
                tableString +="</table>";

                // append the table to the container
                container.innerHTML = tableString;
        }

        client.send();
    

    </script>   
</head>

<body>
    <h1></h1>
    <div id="container"></div>
</body>

</html>

原XML文件 #

<?xml version="1.0" ?>
<hearing name="hearing_schedule">
    <hr>
        <name>Michelle</name>
        <hearing_room>M028</hearing_room>
    </hr>
    <hr>
        <name>Matthews</name>
        <hearing_room>M028</hearing_room>
    </hr>
   <hr>
        <name>Anita</name>
        <hearing_room>M028</hearing_room>
    </hr>
</hearing>

问题根源与修复方案 #

1. 属性名拼写错误 #

获取文本节点值的属性名写错：nodValue应为nodeValue，少写了一个字母e，这是单元格显示undefined的直接原因。

2. 表格HTML结构错误 #

循环中错误地为每个字段单独创建<tr>（表格行），且未正确闭合<td>和<tr>，导致DOM结构混乱。正确结构应为：每个人员的姓名和听证室放在同一行的两个<td>中，每行以</tr>闭合。

3. DOM元素获取时机优化 #

将脚本移至<body>末尾，确保执行getElementById("container")时，容器元素已完成渲染，避免获取不到元素的潜在问题。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>听证日程展示</title>
</head>
<body>
    <h1>听证人员信息</h1>
    <div id="container"></div>

    <script>
        var client;
        if (window.XMLHttpRequest) {
            client = new XMLHttpRequest();
        } else {
            client = new ActiveXObject("Microsoft.XMLHTTP");
        }
        client.open('GET', 'TestData.xml', true);

        client.onload = function() {
            var xmlDoc = client.responseXML;
            var hearings = xmlDoc.getElementsByTagName("hr");
            var container = document.getElementById("container");

            var tableString = "<table border='1'>";
            // 添加表头提升可读性
            tableString += "<tr><th>姓名</th><th>听证室</th></tr>";
            for (var i = 0; i < hearings.length; i++) {
                // 正确获取文本节点值
                var name = hearings[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                var room = hearings[i].getElementsByTagName("hearing_room")[0].childNodes[0].nodeValue;
                // 拼接正确的行结构
                tableString += `<tr><td>${name}</td><td>${room}</td></tr>`;
            }
            tableString += "</table>";

            container.innerHTML = tableString;
        }

        client.send();
    </script>
</body>
</html>

额外优化说明 #

• 添加表格表头，提升页面可读性；
• 使用模板字符串拼接HTML，代码更简洁易读；
• 声明循环变量i为局部变量，避免污染全局作用域；
• 补充页面标题与主标题，完善页面结构。

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