freezedColumns
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<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>
Enter Rows:<input type="text" id="rows"><br><br>
Enter Cols:<input type="text" id="cols"><br><br>
Enter Frozen:<input type="text" id="froz"><br><br><br>
<input type="button" id="create" value="createTable">
<div id="divTable">
<div class="divTableLeft">
<div class="divTableRight">
</div></div></div>
CSS
.divTable{
display:table;
height: 200px;
width:200px;
}
.divTableLeft{
align:left;
display:table-cell;
width:200px;
}
.divTableRight{
align:right
display:table-column;
width:100px;
overflow-x:scroll;
}
.headLeftTable{
display:table-row;
width:auto;
font-weight: bold;
display:table-row;
background-color:#C91622;
text-align: center;
line-height: 25px;
font-size: 14px;
font-family:georgia;
color:#fff;
}
.headRightTable{
display:table-row;
width:auto;
font-weight: bold;
display:table-row;
background-color:#C91622;
text-align: center;
line-height: 25px;
font-size: 14px;
font-family:georgia;
color:#fff;
}
.rowLeft{
display:table-row;
width:auto;
}
.rowRight{
display:table-row;
width:auto;
}
.leftCell{
display:table-cell;
width:200px;
border: 1px solid #CCC;
}
.RightCell{
display:table-cell;
width:200px;
border: 1px solid #CCC;
}
JavaScript
$(document).ready(function(){
$("#create").on("click",createTable);
function createTable(){
var rowsnum=$('#rows').val();
var colsnum=$('#cols').val();
var froznum=$('#froz').val();
var TotalFrozn= colsnum-froznum;
//create var for the main div table and left div table
var divTable=$('#divTable');
var divTableLeft=$('.divTableLeft');
//create heading div table
var heading=$('<div class="headLeftTable"/>');
for(var i=0;i<froznum;i++){
var columns=$('<div class="leftCell" > column +i+</div> ');
columns.appendsTo(heading);
heading.appendsTo(divTableLeft);
}
divTableLeft.appendsTo(divTable);
}
});
var table=document.getElementById('divTab');
var row=document.getElementById('rowL');
alert(row);
for (var i = 0, row;row= table.row[i]; i++)
{
console.log(i);
}