如何使用纯 JavaScript 使用对象数组的选定元素填充引导表？

Question

我想使用纯 JavaScript 从对象数组中填充引导表。

这是我的data.js文件：

JavaScript

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
    }
]

在我的main.js文件中，我有以下 function 构建 HTML 并仅使用firstName 、 lastName和age填充表。 但是，这个 function 不工作。

function createTable(data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].firstName + "</td>");
        tr.append("<td>" + data[i].lastName + "</td>");
        tr.append("<td>" + data[i].age + "</td>");     
    }end(tr);
    }

createTable(testData)

这是我的index.html文件：

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>
    </table>    

    <tbody>
        <!-- what goes here? -->

    </tbody>


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

任何帮助将不胜感激！

谢谢！

Answer 1

tbody应该在table元素内。
您正确创建了tr元素，但没有将其append到tbody 。

 const 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 } ] function createTable(data) { for (let i = 0; i < data.length; i++) { let tr = $('<tr/>'); tr.append("<td>" + data[i].firstName + "</td>"); tr.append("<td>" + data[i].lastName + "</td>"); tr.append("<td>" + data[i].age + "</td>"); $('tbody').append(tr) } } createTable(testData)

 <,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"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery?min.js"></script> </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> <!-- what goes here? --> </tbody> </table> </body> </html>

Answer 2

我添加了一个带有请求的 output 的小提琴链接。 如果我的理解没有错，您将数据 in.js 文件作为对象数组，您需要在引导表中填充数据。 希望它有帮助！

HTML

<link href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th data-field="id">Id</th>
      <th data-field="firstName">First Name</th>
      <th data-field="lastName">Last Name</th>
      <th data-field="age">Age</th>
      <th data-field="retired">Retired</th>
    </tr>
  </thead>
</table>

JS

var $table = $("#table");
    
    $(function () {
      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,
        },
      ];
      var data = [];
    
      testData.forEach(function (value) {
        data.push(value);
      });
      $table.bootstrapTable({ data: data });
    });

小提琴： http://jsfiddle.net/uvbqt6gc/

Answer 3

<tbody>必须始终位于<tfoot>之前或作为<table>的最后一个子项。 如果HTML中没有添加<tbody> ，浏览器默认添加到每个<table>中。

细节在例子中注释

 const data = [{ 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 }]; // Reference <tbody> const tB = document.querySelector("table").tBodies[0]; /** * @desc - Generates table rows from data. A <table> must be in DOM. * @param {object<DOM>} tbody - Reference to a <table> or <tbody> * @param {array<object>} array - An array of objects * @param {number<rest>} headers - One or more numbers representing the * index numbers of the first object of the array's keys. If * undefined it @default to all of the keys. */ function createRows(tbody, array, ...headers) { /** * Make an array of keys from the first object * ["id", "firstName", "lastName", "age", "retired"] */ const keys = Object.keys(array[0]); let hdrs; /** * If >...headers< is undefined, then >hdrs< is keys unfiltered * Otherwise >hdrs< is filtered by the index numbers of >...headers< * [...headers] = [1, 2, 3] * hdrs = ["firstName", "lastName", "age"] */ if ([...headers].length < 1) { hdrs = keys; } else { hdrs = keys.filter((_, i) => [...headers].includes(i)); } /** * Add a <tr> for each object in the array * Add a <td> for each key of >hdrs< * Add the value that corresponds to each key of >hdrs< to each <td> */ array.forEach(obj => { let tr = tbody.insertRow(); hdrs.forEach(key => tr.insertCell().textContent = obj[key]); }); } createRows(tB, data, 1, 2, 3);

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title></title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <main class="container"> <section class="row"> <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></tbody> </table> </section> </main> </body> </html>

如何使用纯 JavaScript 使用对象数组的选定元素填充引导表？

问题描述

3 个解决方案

解决方案1
0 2022-09-15 18:45:39

解决方案2
0 2022-09-15 19:06:16

解决方案3
0 2022-09-15 20:34:57

如何使用纯 JavaScript 使用对象数组的选定元素填充引导表？

问题描述

3 个解决方案

解决方案1 0 2022-09-15 18:45:39

解决方案2 0 2022-09-15 19:06:16

解决方案3 0 2022-09-15 20:34:57

解决方案1
0 2022-09-15 18:45:39

解决方案2
0 2022-09-15 19:06:16

解决方案3
0 2022-09-15 20:34:57