JSFiddle - React, Tailwind, and code Playground

by kiranmn

HTML

<script type="text/javascript">
//<![CDATA[

var trTemplate_withSpaces = '\
    <tr>            \
                <td>first cell</td>              \
                <td>second cell</td>             \
                <td>third cell</td>              \
                <td>fourth cell</td>             \
                <td>fifth cell</td>              \
                <td>sixth cell</td>              \
                <td>seventh cell</td>            \
                <td>eighth cell</td>             \
                <td>nineth cell</td>             \
                <td>tenth cell</td>              \
      </tr>           ';


var trTemplate_withoutSpaces = '\
<tr>\
<td>first cell</td>\
<td>second cell</td>\
<td>third cell</td>\
<td>fourth cell</td>\
<td>fifth cell</td>\
<td>sixth cell</td>\
<td>seventh cell</td>\
<td>eighth cell</td>\
<td>nineth cell</td>\
<td>tenth cell</td>\
</tr>';

function createDynamicTable(nRows, useTemplateWithSpaces){
    var tableHtml = '     <table border="1">    ';
    var trTemplate = (useTemplateWithSpaces)? trTemplate_withSpaces : trTemplate_withoutSpaces;
    for(var i=0; i<nRows; i++){
        tableHtml += trTemplate;
    }
    tableHtml += '      </table>    ';
    document.getElementById('div1').innerHTML = tableHtml;
}

//]]>
</script>

<div>
    Rows: <input type="text" value="500" id="numOfRows" size="3" />
    <input type="checkbox" checked="checked" id="useTemplateWithSpaces" /><label for="useTemplateWithSpaces">Use Template With Spaces</label> &nbsp;&nbsp;
    <button onclick="createDynamicTable( parseInt(document.getElementById('numOfRows').value), document.getElementById('useTemplateWithSpaces').checked )">Create dynamic table</button>
</div>

<div id="div1"></div>