This code ask a user for a number of lines and colums, then it generates the desired table. But I would like to add headers to my dynamic table but I could not manage it.
"use strict";
// Variable
let creerTableau;
const btn1 = document.getElementById("supprimer");
const btn2 = document.getElementById("modifier");
// Fonction
creerTableau = () => {
const nombreLignes = prompt("Nombre de lignes ?");
const nombreColonnes = prompt("Nombre de colonnes ?");
let theader = '<table id="tableauID" border="1">\n';
let tbody = '';
for (var i = 0; i < nombreLignes; i++) { //lines
tbody += '<tr>\n';
for (var j = 0; j < nombreColonnes; j++) { //colums
tbody += '<td>';
tbody += 'Valeur ' + i + ',' + j;
tbody += '</td>'
}
tbody += '<td>';
tbody += '<button id="modifier">Modifier</button>';
tbody += '<button id="supprimer">Supprimer</button>';
tbody += '</td>'
tbody += '</tr>\n';
tbody += '</th>';
}
let tfooter = '</table>';
document.getElementById('body-div').innerHTML = theader + tbody + tfooter;
}
// Exécution
window.onload = creerTableau();
How it is : tab now
What I want to create : tab with good code
"use strict";
// Variable
let creerTableau;
const btn1 = document.getElementById("supprimer");
const btn2 = document.getElementById("modifier");
// Fonction
creerTableau = () => {
const nombreLignes = prompt("Nombre de lignes ?");
const nombreColonnes = prompt("Nombre de colonnes ?");
let theader = '<table id="tableauID" border="1">\n<tr>';
let tbody = '';
for (var i = 0; i < nombreLignes; i++) { //lines
tbody += '<tr>\n';
for (var j = 0; j < nombreColonnes; j++) { //colums
if (j == 0) {
theader += '<th>Entete'+(j+1)+'</th>';
}
tbody += '<td>';
tbody += 'Valeur ' + i + ',' + j;
tbody += '</td>'
}
tbody += '<td>';
tbody += '<button id="modifier">Modifier</button>';
tbody += '<button id="supprimer">Supprimer</button>';
tbody += '</td>'
tbody += '</tr>\n';
tbody += '</th>';
}
theader += '<th colspan="2">Actions</th></tr>';
let tfooter = '</table>';
document.getElementById('body-div').innerHTML = theader + tbody + tfooter;
}
// Exécution
window.onload = creerTableau();
User can dynamically input the header names.
"use strict";
// Variable
let creerTableau;
const btn1 = document.getElementById("supprimer");
const btn2 = document.getElementById("modifier");
// Fonction
creerTableau = () => {
const nombreLignes = prompt("Nombre de lignes ?");
const nombreColonnes = prompt("Nombre de colonnes ?");
let theader = '<table id="tableauID" border="1">\n';
let tbody = '';
tbody += '<tr>\n';
for (var i = 0; i < nombreColonnes; i++) {
var headerName = prompt("Enter header name " + (i + 1) + " ?");
tbody += '<th>';
tbody += headerName;
tbody += '</th>'
}
tbody += '</tr>\n';
for (var i = 0; i < nombreLignes; i++) { //lines
tbody += '<tr>\n';
for (var j = 0; j < nombreColonnes; j++) { //colums
tbody += '<td>';
tbody += 'Valeur ' + i + ',' + j;
tbody += '</td>'
}
tbody += '<td>';
tbody += '<button id="modifier">Modifier</button>';
tbody += '<button id="supprimer">Supprimer</button>';
tbody += '</td>'
tbody += '</tr>\n';
}
let tfooter = '</table>';
let st = theader + tbody + tfooter;
document.getElementById('body-div').innerHTML = st;
}
// Exécution
window.onload = creerTableau();