如何将标题添加到我的动态表？ javascript

Question

此代码向用户询问行数和列数，然后生成所需的表。 但是我想在我的动态表中添加标题但我无法管理它。

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

它是怎样的： tab now

我想要创建的内容： tab with good code

Answer 1

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

Answer 2

用户可以动态输入标题名称。

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