Default Handsontable Demo
HTML
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.css">
<h2>Default Handsontable Demo</h2>
<div id="exampleGrid" class="dataTable"></div>
<button id="delete">Delete Selected Row/Rows</button>
CSS
body {
background-color: white;
margin: 20px;
}
h2 {
margin: 20px 0;
}
JavaScript
var myData = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13],
["2011", 30, 15, 12, 13],
["2012", 30, 15, 12, 13],
["2013", 30, 15, 12, 13],
["2014", 30, 15, 12, 13]
];
//declare row vars
var row1 = null,
row2 = null;
var $container = $("#exampleGrid");
$container.handsontable({
data: myData,
startRows: 5,
startCols: 5,
minSpareCols: 0,
minSpareRows: 0,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
afterSelectionEnd: function(x1, y1, x2, y2){
//add this because of bug
if( (x1 <= x2 && y1 < y2) || (x1 < x2 && y1 <= y2) || (x1 == x2 && y1 == y2)) {
row1 = x1;
if(x1 == 0)
row2 = parseInt(x2 + 1);
else
row2 = x2;
}
else if( (x1 >= x2 && y1 > y2) || (x1 > x2 && y1 >= y2)) {
row1 = x2;
if(x2 == 0)
row2 = parseInt(x1 + 1);
else
row2 = x1;
}
else if(x1 < x2 && y1 > y2) {
row1 = x1;
row2 = x2;
}
else if(x1 > x2 && y1 < y2) {
row1 = x2;
row2 = x1;
}
}
});
//gets instance of handsontable
var instance = $container.handsontable('getInstance');
$('#delete').click(function(){
if(row1 != null){
if(row2 != null || row2 != row1 ){
instance.alter('remove_row', row1, row2);
}
else{
instance.alter('remove_row', row1);
}
row1 = null;
row2 = null;
}else{
alert('Please select a cell...');
}
});