Question

<table>
    <tr><td>aaa</td><td id="one" max="3">aaa</td><td>aaa</td><td>aaa</td></tr>
     <tr><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
     <tr><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
     <tr><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
</table>

table td {
    padding: 3px;
    border:solid 2px red;
    }

I would like receive using only jQuery this:

<table>
    <tr><td>aaa</td><td rowspan="3">aaa</td><td>aaa</td><td>aaa</td></tr>
     <tr><td>aaa</td><td>aaa</td><td>aaa</td></tr>
     <tr><td>aaa</td><td>aaa</td><td>aaa</td></tr>
     <tr><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
</table>

Attribute max == rowspan.
Is this possible?

LIVE: http://jsfiddle.net/fKQSz/

Answer 1

You could do it like this:

var start = $('#one');
var n = start.attr('max');
start = start.prop('rowspan',n).parent();
var idx = start.index();

while(--n) {
    start = start.next();
    start.children().eq(idx).remove();
}

http://jsfiddle.net/fKQSz/4/