Este código le pide al usuario un número de líneas y columnas, luego genera la tabla deseada. Pero me gustaría agregar encabezados a mi tabla dinámica pero no pude administrarlo.
"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();Cómo es: pestaña ahora
Lo que quiero crear: pestaña con buen código
"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();El usuario puede ingresar dinámicamente los nombres de los encabezados.
"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();