Colspan n cells from clicked cell

Similar function can be used for `tr`. http://stackoverflow.com/questions/22497969/how-can-i-merge-selected-table-cells-using-jquery

HTML

<table>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>

<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
<td>r1c4</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
<td>r2c4</td>
</tr>
<tr>
<td>r3c1</td>
<td>r3c2</td>
<td>r3c3</td>
<td>r3c4</td>
</tr>
<tr>
<td>r4c1</td>
<td>r4c2</td>
<td>r4c3</td>
<td>r4c4</td>
</tr>
<tr>
<td>r5c1</td>
<td>r5c2</td>
<td>r5c3</td>
<td>r5c4</td>
</tr>

CSS

table td {
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

table th {
    border: 2px solid black;
    width: 50px;
    height: 50px;
}

JavaScript

$("document").ready(function () {
var leftclick=false;
var selected=[];
var index=[];
 $('td').mousedown(function(e){
 		if(e.which==1)
 		{
 			selected.push($(this));
 			leftclick=true;
 		}
 	}).mouseup(function(e){
 		var first=selected[0];
 		var last=selected[selected.length-1];
 		console.log(selected);
 		if($(first).closest('tr').index()==$(last).closest('tr').index())
 		{
 			//colspan
 			$(first).attr('colspan',selected.length);
 			for (var i=1;i<selected.length;i++)
			{
				$(selected[i]).remove();
			}
 		}
 		else
 		{
 		 	//try rowspan
 			for (var i=0;i<selected.length;i++)
			{
				index.push($(selected[i]).closest('tr').index());
			}

			if(index.length==selected.length)
			{
				//clear
				$(first).attr('rowspan',selected.length);
	 			for (var i=1;i<selected.length;i++)
				{
					$(selected[i]).remove();
				}
			}
 		}

 		
 		selected=[];
     index=[];
 		leftclick=false;
 	});

 	$("table").on( "mouseover", "td", function() {
 		if(leftclick)
		{
			selected.push($(this));
		}
 	});


        });