<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
table td {
border:1px solid #ddd;
height:30px;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.selected {
background:#69c;
}
table {
width:100%;
border-collapse:collapse;
}
</style>
<script>
window.onload = function () {
$('td').mousedown(function () {
$(this).closest('table').find('td').removeClass('selected');
start = {
x: this.cellIndex,
y: this.parentNode.rowIndex
}
$(this).closest('table').find('td').mouseover(function () {
x1 = Math.min(start.x, this.cellIndex);
y1 = Math.min(start.y, this.parentNode.rowIndex);
x2 = Math.max(start.x, this.cellIndex);
y2 = Math.max(start.y, this.parentNode.rowIndex);
$(this).closest('table').find('td').each(function () {
x = this.cellIndex;
y = this.parentNode.rowIndex;
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
});
self = this;
$(document).mouseup(function () {
$(self).closest('table').find('td').unbind('mouseover');
$(document).unbind('mouseup');
});
})
$("#merge").click(function () {
//code here
/*td.setAttribute('rowspan', rows);
td.setAttribute('colspan',columns);*/
alert("code here for rowspan and colspan cells")
});
}
</script>
<input type="button" id="merge" value="Merge Cells">
<table align="left" height="200" border="1" bordercolor="0"
cellpadding="2"
cellspacing="2" width="200">
<tbody>
<tr>
<td height="20" width="40">
</td>
<td height="20" width="40">
</td>
<td height="20" width="40"></td>
<td height="20" width="40">
</td>
</tr>
<tr>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
</tr>
<tr>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
<td height="20" width="40">
</td><td height="20" width="40"></td>
</tr>
<tr>
<td height="20" width="40"></td>
<td height="20" width="40">
</td><td height="20" width="40"></td>
<td height="20" width="40"></td>
</tr>
</tbody>
</table>
