如何創建表并從表的每個<td>中的陣列中添加資料？-有解無憂

如何使用 javascript 將陣列中的資料添加到表中？

var fruits =['apple' ,'orange' , ' grape' , 'banana' , 'guava' , ' watermelon' , 'mango'] ;



showFruits(){

    // code here ;
 }

您需要在函式內創建表格并將陣列資料插入每個單元格。

此功能用于按鈕中，因此當您單擊它時，您需要使用該陣列資料創建一個表

uj5u.com熱心網友回復：

檢查代碼注釋以更好地了解逐步完成的操作

var fruits = ['apple', 'orange', ' grape', 'banana', 'guava', ' watermelon', 'mango'];

showFruits();

function showFruits() {
  //1- get the table by specified id
  const table = document.getElementById("fruits-table");

  //2- loop for each array element
  fruits.forEach((fruit, index) => {
    //create row (tr)
    const tr = document.createElement("tr");
    //create index cell (td)
    const indexTd = document.createElement("td");
    //create fruit cell (td)
    const fruitTd = document.createElement("td");
    // add index & fruit cells data
    indexTd.innerText = index;
    fruitTd.innerText = fruit;
    // append cells to the row
    tr.append(indexTd, fruitTd);
    // append the row to the table
    table.append(tr);
  })

}

table,
td,
th {
  border: 1px solid #777;
  text-align: center;
}

<table id="fruits-table">
  <tr>
    <th>Index</th>
    <th>Fruit</th>
  </tr>
</table>

uj5u.com熱心網友回復：

完成了我的朋友，我使用 Bootstrap 5 作為桌子。在 Javascript 中，我使用for回圈遍歷所有array元素并將它們添加到表中。我定義了一個計數器并預先增加了它來給我們每個水果的數量。

參考： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement

干杯!

//We use const because an array will still be used. In case you want to add/remove elements there are methods for that
const fruits =['apple' ,'orange' , ' grape' , 'banana' , 'guava' , ' watermelon' , 'mango'] ;

function showFruits(){
    //define all variables
    let count = 0;
    let list = '';
    let tbodyTable = document.getElementById('fruits');
    //Using "for of" to go through all the elements of the array and add them to <td>
    //and pre-increment the counter
    for(let fruit of fruits){
          count;
        list  = `
        <tr>
            <th scope="row" id="counter">${count}</th>
            <td>${fruit}</td>
        </tr>`
    }
    tbodyTable.innerHTML = list;
}
//Get the button ID and using addEventListener to show the function
document.getElementById('bot').addEventListener("click", ()=>{
    showFruits();
})

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Using Tables with Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <h1>Click on button to show Fruits</h1>
    <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Fruits</th>
          </tr>
        </thead>
        <tbody id="fruits">
          <tr>
            <th scope="row" id="counter"></th>
            <td></td>
          </tr>
        </tbody>
      </table>
      <button type="button" class="btn btn-primary" id="bot">Show fruits</button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

uj5u.com熱心網友回復：

const table = document.createElement("table");
const tBody = table.createTBody();
const l = fruits.length;
for (let i = 0; i < l; i  ) {
    tBody.insertRow().insertCell().innerText = fruits[i];
}
yourTableContainer.appendChild(table);

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

標籤：javascripthtml数组

上一篇：在Javascript中替換陣列中間元素（動態）的最佳方法

下一篇：匹配兩個值并從多維陣列中取消設定