how to create a table and adding data from the array in each <td> of the table?-CodePudding

how to add data from array to the table using javascript ?

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



showFruits(){

    // code here ;
 }

you need to create the table inside the function and insert the array data into each cells .

this function is used in a button so when u click it u need to create a table with that array data

CodePudding user response：

check the code comments to better understand what's done step by step

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>

CodePudding user response：

Done my friend, I use Bootstrap 5 for the table. In Javascript I used the for loop to go through all the array elements and add them to the table. I defined a counter and pre-incremented it to give us the number of each fruit.

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

Cheers!

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

CodePudding user response：

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);