如何使用純JavaScript使用物件陣列的選定元素填充Bootstrap表？-有解無憂

我想使用純 JavaScript 從物件陣列中填充 Bootstrap 表。

這是我的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
    }
]

在我的檔案中，我有以下函式，它構建 HTML 并僅使用、和main.js填充表格。 但是，這個功能不起作用。firstNamelastNameage

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>

任何幫助將不勝感激！

謝謝！

uj5u.com熱心網友回復：

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>

使用純 javascript ( 沒有 jquery )

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

const tableBody = document.querySelector('tbody');

function createTable(data) {
    
    for (let i = 0; i < data.length; i  ) {
        let tr = document.createElement('tr');
        tr.innerHTML = `<td>${data[i].firstName}</td>
        <td>${data[i].lastName}</td>
        <td>${data[i].age}</td>`
        tableBody.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">
   

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

uj5u.com熱心網友回復：

我添加了一個帶有請求輸出的小提琴鏈接。如果我的理解沒有錯，您在 .js 檔案中有資料作為物件陣列，您需要在引導表中填充資料。希望它有幫助！

HTML

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/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>

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/

uj5u.com熱心網友回復：

<tbody>必須始終位于 a 的最后一個子級之前<tfoot>或作為其最后一個子級<table>。如果 a<tbody>沒有在 HTML 中添加，則<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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/508666.html

標籤：javascripthtml

上一篇：Vuejs-如何在沒有javascriptTypeError的情況下從v-for之外的fetch中顯示json值

下一篇：如何使用JavaScript在iframe周圍包裝兩個單獨的div？