rowspan n cells from clicked cell

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 () {
                $("table").delegate("td" , "click", function(){
                    var rowSp = prompt("Number of cells to span");
                    $(this).attr("rowspan", rowSp);

                    var tdIndex = $(this).index();
                    var trIndex = $(this).parent().index();
                    $(this).parent().nextAll().slice(0,colSp-1).find("td:eq(" + tdIndex + ")").remove();
                   
                });
    var ar1=[]; 
   $("table").delegate("td" , "mouseup", function(){
         var tdIndex = $(this).index();
                    var trIndex = $(this).parent().index();
       console.log(tdIndex);
       console.log(trIndex );
       ar1.push(parseInt(tdIndex));
       ar1.push(parseInt(trIndex));
       console.log(ar1);
       console.log(ar1[0]);
       var a=ar1[4];
       var b=ar1[2];
       console.log(parseInt(a,10) - parseInt(b,10));
    $(this).attr("rowspan",3);    
     });  
 
     $("table").delegate("td" , "mousedown", function(){
         var tdIndex = $(this).index();
         var trIndex = $(this).parent().index();
         console.log(parseInt(tdIndex));
       console.log(trIndex );
        ar1.push(parseInt(tdIndex)); 
         ar1.push(parseInt(trIndex));  
     }); 

        });