dynamic table

by Rituja Veer

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<label>No. OF COLUMNS:
    <input type="text" id="NoColumn" value="8" />
</label>
<br />
<label>No. OF Rows:
    <input type="text" id="NoRows" value="7" />
</label>
<br />
<label>No. OF FROZEN COLUMNS:
    <input type="text" id="NofrozenColumn" />
</label>
<br />
<input id="create" type="button" value="Create Table!" />
<div id="wrapper"></div>

CSS

.divTable {
    display:table;
    overflow-x:scroll;
    border: 1px solid #CCC;
}
.divCell {
    display:table-cell;
   // overflow-x:scroll;
   // border: 1px solid #CCC;
}
.divHead {
    height: 30px;
    font-size: 16px;
    display:table-row;
    background-color:#C91622;
    color:#fff;
}
.divRow{
 border: 1px solid #CCC;
 display:table-row;    
    
}

JavaScript

$('#create').on('click', createTable);


function createTable() {


    var table = document.createElement('div');
    var wrapper = document.getElementById('wrapper');
    var row = document.getElementById('NoRows').value;
    var col = document.getElementById('NoColumn').value;
    wrapper.appendChild(table);
    var html = '<div class="divTable">' + '<div class="divHead">' + '<div class="divRow">' + '<div class="divCell">';

    // var head='<div class="divHead">';
    //  for(var k=1;k<col;k++){
    //  head+="col: "+k;    
    // }
    //  head+='</div>';
    // $(".divHead").append(".divTable");

    for (var i = 1; i < row; i++) {
        html += "row: " + i;


        for (var j = 1; j < col; j++) {

            html += "cell" + j;

        }
        html += '<br>';

        html += '</div>' + '</div>' + '</div>';

    }
    html += '</div>';

    table.innerHTML = html;






}