使用jquery合并空行与文本行 [英] Merge empty rows with text row using jquery

问题描述

我有一个表格，其中一行将包含一些文本，之后，其他行是空的，不包含文本，之后有Total.So我想合并所有空行与文本行。

 < table id ='temp'border = 1> 
< col width =50> 
< 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> 
< tr> 
< td>总计< / td> 
< td> 162< / td> 
< / tr> 
< / table> 
  

现在我希望mayank之后的单元格应该合并，因为它们不包含任何文本。和我想输出作为第二张图片使用jquery.Js小提琴链接

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 text rows.

<table id='temp' border=1>
<col width="50">
<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>
<tr>
<td>Total</td>
<td>162</td>
</tr>
</table>

Now i want that the cells after mayank should merge as they contain no text.So first picture display input and i want output as second picture using jquery.Js fiddle link http://jsfiddle.net/mayankit/pFkq5/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/

这篇关于使用jquery合并空行与文本行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！