Question

0

212

Views

Multiple column in JavaScript

I am new to JavaScript. I wrote forEach and the head table repeats every time I add something in database. I need col to stay and when I add something new to database its add in rows.

Here is a screenshot to illustrate what I mean:

Code:

import {http} from "./http.js";

document.addEventListener("DOMContentLoaded", getProducts);

function getProducts() {
    http
   
        .get('http://localhost:3000/products')
        .then((data) =>{
            let output = "";
            
            data.forEach((product) => {
                
                output += `
                
                <table class="table">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Clasa</th>
                    <th scope="col">Numar Elevi</th>
                    <th scope="col">Profesor</th>
                    <th scope="col">Media Notelor</th>
                  </tr>
                </thead>
                
                <tbody>
                   <tr>
                    <th scope="row">${product.id}</th>
                     <td>${product.numar}</td>
                    <td>${product.profesor}</td>
                     <td>${product.elevi}</td>
                     <td>${product.media}</td>
                   </tr>
                   </tbody>                
 </table>
`;
              
         
            })
            document.getElementById('table').innerHTML = output;
        });
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T09:55:37.342Z

// As the Ajax call is not the issue here, simulate some sample data
const data = [ 
  { id:1, numar: "a IV-a A", profesor: 23, elevi: "Matel Marian", media: "8.32"}, 
  { id:2, numar: "a VI-a C", profesor: 26, elevi: "Cornel Ababei", media: "7.96"}, 
  { id:3, numar: "ss", profesor: "sss", elevi: "sss", media: "sss"}, 
];

// The <table>, <thead>, and <tbody> tags are needed just once
let output = `<table class="table">
               <thead class="thead-dark">
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Clasa</th>
                   <th scope="col">Numar Elevi</th>
                   <th scope="col">Profesor</th>
                   <th scope="col">Media Notelor</th>
                 </tr>
               </thead>
               <tbody id="tbody">`;

// Then for each item, append a <tr>...</tr> element
data.forEach((product) => {
                output += `
                   <tr>
                    <th scope="row">${product.id}</th>
                     <td>${product.numar}</td>
                    <td>${product.profesor}</td>
                     <td>${product.elevi}</td>
                     <td>${product.media}</td>
                   </tr>`;
            });

// Finally, close off with </table>
output += "</tbody></table>";

document.getElementById("table").innerHTML = output;

// Say later you have another Ajax call and got another item. 
const add = () => {
  // simulated data:
  const newItem = I = { id:4, numar: "b IX-c D", profesor: 88, elevi: "Richard Feyman", media: "9.99"};
  let row = document.createElement("tr");
  row.innerHTML = `<td>${I.id}</td><td>${I.numar}</td><td>${I.profesor}</td><td>${I.elevi}</td><td>${I.media}</td>`;
  const tbody = document.getElementById("tbody");
  tbody.appendChild(row);
}

.table, .table td, .table th {
  border: solid 1px black
  }

<div id="table"></div>

<p>
 <button onclick="add()">Add another row</button>
</p>

0

212

Multiple column in JavaScript

1 answers

0

Find remote jobs

Andres GPT