Delete rows and columns

Delete rows and columns and prevent the data from overriding

by Rohit Bisht

HTML

<input type="checkbox" id="colornot"/>Col-wise<br>
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="del_row" value="Del row"/><br>
<input type="button" id="add_col_after" value="Add col after"/>
<input type="button" id="del_col" value="Del row"/>

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 tabindex = "";
$(document).ready(function() {
    $("#createit").click(function() {
        num_rows = document.getElementById("rows").value;
        num_cols = document.getElementById("cols").value;
        createtable(num_rows, num_cols);
    });
});
$('#add_row_after').click(function() {
    if (tid !== "") {
        num_rows++;
        createtable(num_rows, num_cols);
        tid = "";
    }
});
$('#del_row').click(function() {
    if (tid !== "" && num_rows !== 1) {
        num_rows--;
        createtable(num_rows, num_cols);
        tid = "";
    }
});

function createtable(num_rows, num_cols) {
    var theader = "<table class='editableTable' id='editableTable'>";
    var tbody = "<tbody>";
    var temp = 1;
    console.log(num_rows + ' ' + num_cols);
    for (var i = 1; i <= num_rows; i++) {
        tbody += "<tr id='row_id_" + i + "'>";
        for (var j = 1; j <= num_cols; j++) {
            tbody += "<td id='" + temp + "' tabindex=" + temp + ">";
            tbody += temp;
            tbody += "</td>";
            temp++;
        }
        tbody += "</tr>";
    }
    var tfooter = "</tbody></table>";
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    $('.editableTable tr').css('background-color', 'white');
    var rows = $('.editableTable tr');
    $('.editableTable tr td').focus(function() {
        if ($('#colornot').is(':checked')) {
        		$('.editableTable td').css('background-color', 'white');
            var index = $(this).index();
            rows.find(':nth-child(' + (index + 1) + ')').css('background-color', 'red');
        } else {
            console.log("blue");
            tid = $(this).parent().attr('id');
            $('.editableTable tr').css('background-color', 'white');
            $('.editableTable tr td').attr('style',"");
            $('#'+tid).css('background-color', 'blue');
            $('#row_num').text(tid);
        }
    });
   ...