Table with json object

update json according to the table

by Rohit Bisht

HTML

Rows : <input type="text" name="rows" id="rows"/><br/>
Cols : <input type="text" name="cols" id="cols"/><br/>
<input type="button" value="Create Table!" id='createit' />
<div id="wrapper"></div>
<p id="row_num"></p>
<input type="button" id="add_row_after" value="Add row after"/>
<input type="button" id="add_row_before" value="Add row before"/>
<input type="button" id="del_row" value="Del row"/><br>
<input type="button" id="add_col_after" value="Add col after"/>
<input type="button" id="add_col_before" value="Add col before"/>
<input type="button" id="del_col" value="Del col"/>

CSS

.editableTable {
    border: solid 0px;
    width: 100%;
    text-align: center
}
.editableTable td {
    border: solid 0.5px;
    border-color: lightblue;
    width: 140px;
}
.selected {
  background-color: red;
  color: green;
}
.editableTable .cellEditing {
  padding: 0;
}

select {
  border: 0px;
  width: 100%;
}

JavaScript

var num_rows;
var num_cols;
var tid = "";
var cnum="";
var tabindex = "";
var json1 = {};
var temp1;
var last;
$(document).ready(function() {
    $("#createit").click(function() {
        num_rows = document.getElementById("rows").value;
        num_cols = document.getElementById("cols").value;
        var temp = 1;
        for (var i = 1; i <= num_rows; i++) {
        	for (var j = 1; j <= num_cols; j++) {
            json1[temp]= "cell_" + temp;
            temp++;
            last = temp;
        	}
    		}
        createtable(num_rows, num_cols);
        temp1=json1;
        //console.log('one\n'+JSON.stringify(json1)+'\n'+JSON.stringify(temp1));
    });
});
$('#add_row_after').click(function() {
    if (tid !== "") {
        num_rows++;
        //temp1=json1;
        //console.log('before: '+ JSON.stringify(json1));
        managejsonafteraddingrow();
        //console.log('after add : '+ JSON.stringify(json1));
        temp1 = json1;
        createtable(num_rows, num_cols);
        tid = "";
        //console.log('two\n'+JSON.stringify(json1)+'\n'+JSON.stringify(temp1));
    }
});
$('#add_row_before').click(function() {
    if (tid !== "") {
        num_rows++;
        //temp1=json1;
        //console.log('before: '+ JSON.stringify(json1));
        managejsonbeforeaddingrow();
        //console.log('after add : '+ JSON.stringify(json1));
        temp1 = json1;
        createtable(num_rows, num_cols);
        tid = "";
        //console.log('two\n'+JSON.stringify(json1)+'\n'+JSON.stringify(temp1));
    }
});

$('#del_row').click(function() {
    if (tid !== "" && num_rows !== 1) {
        managejsonafterdeletingrow();
        //console.log('delete row : '+tid+'\n');
        temp1 = json1;
        num_rows--;
        createtable(num_rows, num_cols);
        //console.log('three\n'+JSON.stringify(json1)+'\n'+JSON.stringify(temp1));
        tid = "";
    }
});
$('#add_col_after').click(function() {
    if (tid !== "") {
        num_cols++;
       ...