JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<table id='container'></table>

CSS

table {
    border-collapse: collapse;
    border: solid 1px #ACE;
}
tr {
    height: 15px;
}
td {
    border: solid 1px red;
}

JavaScript

//Table Generator
var c = parseInt(prompt("Enter column "), 10); // 10
var r = parseInt(prompt("Enter row "), 10); // 10
var cTmp = c;
var rTmp = r;

function rowLoop() {
    $('tr.tableRow').each(function (index) {
        var trFound = $("tr.tableRow:eq(" + index + ")");
        var rowNum = parseInt(($("tr.tableRow:eq(" + index + ")").index()), 10);
        var tdAdd = "<td>test</td>";
        if ($(this).index() === rowNum) {            
            trFound.append(tdAdd);
            console.log("Add a TD");
            console.log(rowNum + "=" + $(this).index());
            console.log(rowNum + "=" + $(this).index());
        } else {            
            console.log(rowNum + "<>" + $(this).index());
            console.log(rowNum + "<>" + $(this).index());
        }
    });
}
while (0 < rTmp) {
    cTmp = c;    
    $("<tr  class='tableRow'>").appendTo('table#container');
    while (0 < cTmp) {        
        rowLoop();
        cTmp--;        
    }
    document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + "</tr>";
    rTmp--;
}