0
213
ViewsVarias columnas en JavaScript
Soy nuevo en JavaScript. Escribí forEach y la tabla principal se repite cada vez que agrego algo en la base de datos. Necesito col para quedarme y cuando agrego algo nuevo a la base de datos, se agrega en filas.
Aquí hay una captura de pantalla para ilustrar lo que quiero decir:
Código:
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; }); }
·
Juan Pablo Isaza
1 answers
Answer question0
// 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>
·
Juan Pablo Isaza
Report
Answer question