HTML SpreadSheet

by Anshul Pandey

HTML

<div id="wrapper">
<table id="spreadSheet">
	<thead><tr></tr></thead>
	<tbody></tbody>
</table>
</div>

CSS

*{padding: 0;margin:0;}
body{padding:10px;font:12px Arial;}
#spreadSheet{border:1px solid #000;border-collapse: collapse;}
#spreadSheet th,#spreadSheet td,#spreadSheet td.rowHandler{height:40px;width:100px;border: 1px solid #000;background:#bdbdbd;position: relative;}
#spreadSheet td{background: #fff;padding:0 2px;text-align: center;}
#spreadSheet td.firstColumn{text-align: center;}
#spreadSheet th .esort{padding-left:5px;display: inline-block;}
#spreadSheet .addElements{display: inline-block;padding:0 3px;}
.close{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA21JREFUeJzt3LmOXEUYR/HvIJFYSAz22HiBESIx4A2zme0BeAIeiYgHICFGiDcgcUDEZoPZbZCKhH0nIUEmwBczdvUs3fd23ao6P+nm1f2d+B8hSZIkSZIkSZIkSZIkSZIkSZIkSdJCW8DFiHiw9ENm6nngzYjYKP2QKWwBXwHXga/DCG71HPDnjf/nUkRsln7QqIA3bvy460Zwm2eBP275f14t/aixbQDvGcFtcsd/KyLuKv2wKdwDvG8E/3mmp+MPjOBfTwO/93b8wUHgUscRdH38Qa8RXPD4N/UWwVPAbx5/u4PA5Q4i8Pg7OAR80HAET3r83bUawRPArx5/bw4BHzYUgcdfwmYjETzu8Ze3CVypOILHgF88/moOAx9VGIHHH1FtEZz3+OOrJYLzwM8efxqHgY9nHMGjHn96R2YawTngJ4+/HkeAT2YUgccv4F7g0xlEcNbjl1M6grPAjx6/rKPAZwUiOOPx52PdEZwGfvD483IU+HwNEXj8GZs6glMef/6OTRTBKeB7j1+HY8AXI0bwiMevz/GRIngY+M7j1+k4cHWFCDx+A04A15aI4CHgW4/fhv1G4PEbdB/w5R4iOOnx27VbBCeBbzx+2xZF8ILH78f93JypWfR5/MbtFIHH78SLmeP/HRGnSz9M08vNsgxfiogHCr9PE8otc/xlBH1YNMtyAnjbCNq22yzL3cA7RtCmC+xtnGEDeNcI2rLfWRYjaMiymzy5RdMURlCVVTd5cmOWKYygCmPNshhBhcbe5MntGKYwglmaapPHCCow9SxLbswyhRHMwro2eXI7himMoKh1DzIZwYyUGmTKjVmmMIK1Kj3IlBuzTGEEazGXQabcmGUKI5jU3DZ5chN2KYxgEnM7/sAI1mDug0y5HcMURjCKWgaZcjuGKYxgJbUNMuV2DFMYwVLOUOcsS27CLoUR7Evtg0xGsILajz/ITdilMIIdtbbGZQT70OoaV27CLoURbNP6Glduwi6FEUREP4NMuQm7FJ1H0MvxB7kJuxSdRtDrIFNuwi5FZxH0evxBbr0sRScR9H78QZcROMW2XW64KkWjETjFltdHBMBrHn+h3HDVK6UfNbYDwEWPv9D/I3g9Iu4s/aApHABeDo+/yBbwUkTcUfohkiRJkiRJkiRJkiRJkiRJkiSpDv8Ax+/Wa5nmksYAAAAASUVORK5CYII=);
	background-size: 100%;
	width:20px;
	height:20px;
	position:...

JavaScript

var eXcelsheet = function (config) {
    this.columns = config.column;
	this.rows = config.rows;
	this.sheetName = config.sheet;
	this.head = document.getElementById(this.sheetName).getElementsByTagName('thead')[0].getElementsByTagName('tr')[0];
	this.body = document.getElementById(this.sheetName).getElementsByTagName('tbody')[0];
	$mythis = this;
}

eXcelsheet.prototype = {
    constructor: eXcelsheet,
    init:function ()  {
		for (var i = 0;i <= this.rows;i++) {
			this.addRow(i,false);
		};
    },
    addRow: function(index,mode){
    	if(mode){
    		var index = ++$mythis.rows;
    	}
    	var instanceRow;
    	if(index > 0){
    		instanceRow = document.createElement('tr');
    	}
    	for(var j = 0;j <= $mythis.columns;j++){
    		var instanceCell;
    		if(index == 0){
    			instanceCell = $mythis.createCell('head',j,index);
    			$mythis.head.appendChild(instanceCell)
    		}else{
    			instanceCell = $mythis.createCell('body',j,index);
    			instanceRow.appendChild(instanceCell)
    		}
    	}
    	if(index > 0){
    		$mythis.body.appendChild(instanceRow);
    	}
    },
    addColumn: function(){
    	var index = ++$mythis.columns;
    	for(var k = 0;k <= $mythis.rows;k++){
    		var instanceCell;
    		if(k == 0){
    			instanceCell = $mythis.createCell('head',$mythis.columns,$mythis.rows);
    			$mythis.head.appendChild(instanceCell);
    		}else if(k > 0){
    			var instanceRow = document.getElementById($mythis.sheetName).rows[k];
    			instanceCell = $mythis.createCell('body',$mythis.columns,$mythis.rows)
    			instanceRow.appendChild(instanceCell);
    		}
    	}
    },
    removeRow: function(e){
    	e.target.parentNode.parentNode.remove();
    	$mythis.rows--;
    	$mythis.reOrderRowName();
    },
    getIndexofColumn: function(target){
    	var sheet = $mythis.head.getElementsByTagName('th');
    	for(var t = 1;t< sheet.length;t++){
    		if(sheet[t].children[0].innerHTML == target.children[0].innerHTML){
    			return t;
    		}
   ...