Merge Empty Rows With Text Row Using Jquery

I have a table in which a row will contain some text and after that other rows are empty containing no text and after that there is Total.So i want to merge all the empty rows with

Solution 1:

I updated @Wilmer's solution. Mind that ":empty" is for really empty elements, does not accept whitespaces

function spanRow(column) {
    var categoryColumn = $("table tr td:nth-child(" + column +")");
    var rowspan = 1;
    var lastElement = categoryColumn.first();
    categoryColumn.each(function () {
        var element = $(this);
        if ($.trim(element.html()) == '') {
            element.remove();
            rowspan++;
        } else {
            lastElement.attr("rowspan", rowspan);
            lastElement = element;
            rowspan = 1;
        }
    });
    lastElement.attr("rowspan", rowspan);
}

See http://jsfiddle.net/Evyw6/

Solution 2:

Try the following:

Select all the rows in the first column

var firstColumnRows = $("table tr td:first-child"); 

Remove empty and count them

var rowspan = firstColumnRows.filter(":empty").remove().length; 

Set attribute rowspan to make the remaining row stretch along the empty

firstColumnRows.not(":empty").first().attr("rowspan", rowspan+1);

Solution 3:

http://jsfiddle.net/JSU35/1/

here is a solution. You need to modify a little your table but it will do the job.

HTML :

<table id='temp' border=1>
<col width="50">
<tbody>
    <tr>
    <td>Mayank</td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    <tr>
    <td></td>
    <td>11</td>
    </tr>
    </tbody>
    <tfoot>
<tr>
    <td>Total</td>
    <td>162</td>
</tr>
    </tfoot>
</col>
</table>

jQuery :

var emptytd = $("tbody tr td:first-child:empty").length;
$('tbody tr td:first-child:not(:empty)').last().attr('rowspan', emptytd+1);
$("tbody tr td:first-child:empty").each(function(){
    $(this).remove();
});