无法将.js文件数据渲染到HTML表格，请求技术协助

嘿，我来帮你搞定这个表格数据加载的问题！你的代码里有几个关键问题导致数据无法正常显示，我一个个给你拆解：

1. DOM元素获取的错误 #

document.getElementsByClassName('firstname')返回的是一个元素数组（HTMLCollection），不是单个DOM元素，直接给它赋值.innerHTML是无效的。你需要针对每个元素单独操作，或者更合理的是重构表格生成的逻辑。

2. 表格结构不符合HTML规范 #

你在<tr>标签里嵌套了<div>，这是不允许的——<tr>的直接子元素只能是<td>或<th>，浏览器会自动修正这个错误结构，导致你的脚本无法正确找到目标元素。

3. 数据渲染逻辑的偏差 #

当前的readJSON函数只生成了firstname的单元格内容，但你需要为每一条person数据生成一整行表格，而不是把所有名字塞到同一个位置。

4. 脚本执行时机的问题 #

虽然你引入了tabledata.js，但最好确保DOM完全加载后再执行渲染函数，避免出现“找不到元素”的情况。

修改后的完整代码 #

HTML部分

<!DOCTYPE html> 
<html lang="nl-NL"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <meta name="description" content="Dit is de website van Gerard Van De Weijer Hobbyist en Vader van 3"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/website-papa.css"> 
    <meta name="robots" content="index, nofollow"> 
    <meta name="author" content="Gerard Van De Weijer"> 
    <meta name="web-author" content="Pieter Van De Weijer"> 
    <link rel="canonical" href="http://website-gerard.com"> 
    <meta charset="UTF-8"> 
    <script src="sources/tabledata.js"></script> 
    <script> 
        // 确保DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            renderTable(persons);
        });

        function renderTable(persons) {
            var tableBody = document.querySelector('table');
            var output = '';
            // 遍历每个person，生成完整的表格行
            for (var i = 0; i < persons.length; i++) {
                output += `
                    <tr>
                        <td>${persons[i].firstname}</td>
                        <td>${persons[i].lastname}</td>
                        <td>${persons[i].age}</td>
                        <td>${persons[i].location}</td>
                    </tr>
                `;
            }
            // 把生成的行追加到表格里（注意：要放在表头行之后）
            tableBody.innerHTML += output;
        }
    </script> 
    <title> Tables</title> 
</head> 
<body> 
    <!--dit is is een container--> 
    <div id="container"> 
        <header> 
            <h1>t02m91</h1> 
            <div id="facebook"> 
                <a href="https://www.facebook.com/gerard.vandeweijer.5"><img src="images/facebook.png"></a> 
            </div> 
        </header> 
        <nav> 
            <ul> 
                <li class="menuli"><a href="index.html">Home</a></li> 
                <li class="menuli"><a href="Anchors.html">Anchors</a></li> 
                <li class="current"><a href="Tables.html">Tables</a></li> 
                <li class="menuli"><a href="Iframes.html">Iframes</a></li> 
                <li class="menuli"><a href="html5.html">HTML5</a></li> 
                <li class="menuli"><a href="contact.html">Contact</a></li> 
                <li class="menuli">Opdrachten 
                    <ul> 
                        <!-- ik kon er geen spatie in krijgen dus ik heb het zo gefixt ik leg dit uit in de les--> 
                        &nbsp;<li><a href="opdracht3t02m03.html">Borders</a></li> 
                        <li><a href="opdracht3t02m04.html">Classes</a></li> 
                        <li><a href="opdracht1t02m06.html">Floats</a></li> 
                        <li><a href="opdracht3t02m06.html">Z-index</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </nav> 
        <main> 
            <h1>Tables</h1> 
            <table> 
                <tr> 
                    <th>Voornaam</th> 
                    <th>Achternaam</th> 
                    <th>Leeftijd</th> 
                    <th>Woonplaats</th> 
                </tr>
                <!-- 这里不再需要手动写空行，脚本会自动生成 -->
            </table> 
        </main> 
        <footer> 
            <span> Gerard Van De Weijer 2017™</span> 
        </footer> 
    </div> 
</body> 
</html>

tabledata.js部分（保持不变）

var persons = [ 
    {"firstname":"Nel", "lastname":"De Beer", "age":9, "location":"Weert"}, 
    {"firstname":"Bob", "lastname":"Janssen", "age":33, "location":"Eindhoven"}, 
    {"firstname":"Beatrix", "lastname":"Peperkamp", "age":76, "location":"Nijmegen"} 
];

关键修改说明 #

• 用DOMContentLoaded事件确保脚本在DOM完全加载后执行，避免找不到表格元素。
• 重构了渲染函数renderTable，遍历每个person生成完整的<tr>行，包含所有字段。
• 移除了表格里无效的<div>和空行，让脚本自动追加数据行，结构更规范。
• 使用模板字符串（反引号`）让HTML拼接代码更易读。

这样修改后，你的表格就能正常显示所有person数据啦！

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