如何用纯JavaScript从对象数组中选取元素填充Bootstrap表格？

原始代码问题分析 #

你的代码存在几个核心问题：

• 使用了jQuery语法（$('<tr/>')）但未引入jQuery库，且需求是纯JavaScript实现
• HTML中<tbody>标签放在了<table>外部，结构不符合HTML规范
• createTable函数中存在语法错误（end(tr)是无效方法），且循环中创建的表格行未添加到页面DOM中

修正后的完整代码 #

1. data.js（无需修改） #

let testData = [
    {id : 1, firstName : 'John', lastName : 'Smith', age : 35, retired : false},
    {id : 2, firstName : 'Mary', lastName : 'Williams', age : 27, retired : false},
    {id : 3, firstName : 'Bill', lastName : 'Jones', age : 83, retired : true},
    {id : 4, firstName : 'Sally', lastName : 'Lee', age : 49, retired : false}
]

2. index.html（修正表格结构） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>
     <div id="content-1"></div>

    <table class="table">
        <thead>
          <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Age</th>
          </tr>
        </thead>
        <!-- 修正：将tbody移入table内部 -->
        <tbody id="table-body">
            <!-- 数据将在这里填充 -->
        </tbody>
    </table>    

    <script src="./js/data.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>

3. main.js（纯JavaScript实现填充逻辑） #

function createTable(data) {
    // 获取目标tbody元素
    const tbody = document.getElementById('table-body');
    // 清空原有内容（可选）
    tbody.innerHTML = '';

    for (let i = 0; i < data.length; i++) {
        // 创建表格行
        const tr = document.createElement('tr');
        // 创建单元格并填充数据
        const firstNameTd = document.createElement('td');
        firstNameTd.textContent = data[i].firstName;
        const lastNameTd = document.createElement('td');
        lastNameTd.textContent = data[i].lastName;
        const ageTd = document.createElement('td');
        ageTd.textContent = data[i].age;

        // 将单元格添加到行
        tr.appendChild(firstNameTd);
        tr.appendChild(lastNameTd);
        tr.appendChild(ageTd);
        // 将行添加到tbody
        tbody.appendChild(tr);
    }
}

// 调用函数填充表格
createTable(testData);

关键修正说明 #

1. HTML结构修正：将<tbody>放入<table>内部，并给它添加id方便JS获取
2. 纯JS实现：使用document.createElement创建DOM元素，textContent设置文本内容，避免innerHTML的XSS风险
3. DOM插入逻辑：在循环内部将每一行添加到tbody，确保所有数据行都能渲染到页面
4. 语法错误修复：移除无效的end(tr)方法，使用标准JS语法

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