CODEWITHSUNDEEP
jqueryhtml-table
user666923
user666923

Reputation: 87

Merge multiple <td> into 1 with jQuery

I have a wide data table with 5 columns, when the user clicks on "print" link, the table should combine the content from 3rd and 4th td into 1 td to save space.

<table>
<thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</tbody>
</table>

Please help.

Upvotes: 0

Views: 8940

Answers (4)

user1106925
user1106925

Reputation:

Quick and simple like this...

​$('table tr > :nth-child(3)').append(function() {
    return $(this).next().remove().contents();
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

DEMO: http://jsfiddle.net/3eDLS/

Upvotes: 4

mpen
mpen

Reputation: 282895

This was a tricky one. Best I could do: http://jsfiddle.net/mnbayazit/HbPrw/

$('button').click(function() {
    $('tbody tr').each(function() {
        $('td:eq(1)', this).after('<td>' + $('td:eq(2)', this).html() + $('td:eq(3)', this).html() + '</td>');
        $('td:eq(3),td:eq(4)', this).remove();
    });
});

(Err... I deliberately left the thead as is, but it occurs to me now that this may be undesirable after all)

Upvotes: 0

dfsq
dfsq

Reputation: 193271

What about something like this:

$('table').find('th, td').filter(':nth-child(3)').append(function() {
    return $(this).next().html();
}).next().remove();​

Demo http://jsfiddle.net/TsA8G/1/

Upvotes: 0

bevacqua
bevacqua

Reputation: 48496

$("tr td:nth-child(3)").each(function()
{
    var t = $(this);
    var n = t.next();
    t.html(t.html() + n.html());
    n.remove();
});

Upvotes: 6

Related Questions