JSFiddle - React, Tailwind, and code Playground

by pravinnavle

HTML

<table>
    <tr>
        <td>Row Count</td>
        <td>Column Count</td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" id="txtrows" /></td>
        <td><input type="text" id="txtcols"/></td>
        <td><button onclick="CreateTable()">Create Table</button></td>
    </tr>
</table>



<div id="myDynamicTable"></div>

JavaScript

function CreateTable() {
    var rowCtr;
    var cellCtr;
    var rowCnt;
    var cellCnt;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('Table');
    table.border = '1';
    table.id = 'myTable';
    var tableBody = document.createElement('Tbody');
    table.appendChild(tableBody);
    rowCnt = document.getElementById('txtrows').value;
    cellCnt = document.getElementById('txtcols').value;
    for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
        var tr = document.createElement('tr');
        tableBody.appendChild(tr);
        for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
            var td = document.createElement('td');
            td.width = '120';
            td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
    }