JSFiddle - React, Tailwind, and code Playground

by oscard

CSS

*{
   outline:none;
   font-family:sans-serif;
   font-size: 12px;
}
table {
    border-spacing: 0px;
    border-collapse: collapse;
    border:0;
}
th {
    background:lightblue;
    border:1px solid #ccc;
    padding: 5px;
}
tr {
    border:0px solid #ccc;
}
td {
    border:1px solid #ccc;
    padding:5px;
}

JavaScript

function generate_table(cols, rows) {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    if ((0 != cols) && (0 != rows)) {
        // creating all cells
        for (var h = 0; h < 1; h++) {
            // creates a table head row
            var hrow = document.createElement("tr");

            for (var j = 0; j < cols; j++) {
                var hcell = document.createElement("th");
                hcell.setAttribute("contenteditable", "true");
                var hcellText = document.createTextNode(" header , Column " + (j + 1));
                hcell.appendChild(hcellText);
                hrow.appendChild(hcell);
            }
            // add the row to the end of the table body
            tblBody.appendChild(hrow);
        }

        for (var i = 0; i < rows; i++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var j = 0; j < cols; j++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                cell.setAttribute("contenteditable", "true");
                var cellText = document.createTextNode(" Row " + (i + 1) + ", Column " + (j + 1));
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);

    } else {
        //body.appendChild(document.createTextNode('Veuillez entrer des valeurs supérieurs à zéro !!!'));
  ...