Insert a html tag in between an existing html tag programatically

Question

This is my code.

<table>
    <tbody>
        <tr>
            <td>Some Data</td>
            <td>Some Data</td>
            <td>Some Data</td>
            <td>Some Data</td>
    </tr>           
    </tbody>
</table>

I want to add </tr><tr> in between the row programatically at runtime:

<table>
    <tbody>
        <tr>
            <td>Some Data</td>
            <td>Some Data</td>
    </tr>
    <tr>
            <td>Some Data</td>
            <td>Some Data</td>
    </tr>           
    </tbody>
</table>

I tried $('tr td').eq(1).after('</tr><tr>');, but it instead gave:

<table>
    <tbody>
        <tr>
            <td>Some Data</td>
            <td>Some Data</td>
        </tr/>
        <tr/>
            <td>Some Data</td>
            <td>Some Data</td>
        </tr>           
    </tbody>
</table>

So, how can I achieve the required functionality?

BenM · Accepted Answer · 2012-10-31 10:14:06Z

4

You need to split the row into two. You could do this using the following:

$(function() {
    $('tbody tr').each(function() {  
        var cells = $(this).children('td'),
             row1 = $('<tr />'),
             row2 = $('<tr />');

        row1.append(cells[0]).append(cells[1]);
        row2.append(cells[2]).append(cells[3]);

        $(this).replaceWith(row1.add(row2));
    });
});

Please see the sample jsFiddle here > http://jsfiddle.net/ayYa5/

answered Oct 31, 2012 at 10:14

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Viral Jain Over a year ago

Hey buddy, your was good enough, but @Asad 's answer seems better performance-wise as well as to eyes... :)

BenM Over a year ago

Thanks. Just be cautious though, as his solution will only work for the first <tr> element.

Viral Jain Over a year ago

Hey, yeah, but that isn't of much concern... :)

score 1 · Accepted Answer · 2012-10-31 11:29:24Z

1

In terms of string manipulation, you are inserting "<tr></tr>".

In terms of DOM manipulation, however, you are making a new tr and moving two of the children of the original to it. If you use DOM manipulation tools, you have to follow the DOM manipulation logic.

$('tr').eq(0).after('<tr></tr>');
$($('tr td').eq(1).nextAll()).appendTo($('tr').eq(1));

edited Oct 31, 2012 at 11:29

answered Oct 31, 2012 at 10:13

user1726343

Comments

Dreen · Accepted Answer · 2012-10-31 10:17:43Z

0

I came up with this:

$('<tr></tr>').appendTo($('tbody'));
$('tbody tr:first-child td:last-child').appendTo($('tbody tr:last-child'));
$('tbody tr:first-child td:last-child').appendTo($('tbody tr:last-child'));

Live demo here

answered Oct 31, 2012 at 10:17

Dreen

7,28611 gold badges50 silver badges70 bronze badges

Comments

freakish · Accepted Answer · 2012-10-31 10:18:05Z

0

Well, it heavily depends on the format of data you have, but here's what you can try:

$( "td" ).unwrap( );

var wrap_tds = function( ) {
    var els = $( "tbody" ).children( "td:lt(2)" );
    if (els.length) {
        els.wrap( "tr" );
        wrap_tds( );
    }
};
wrap_tds( );

answered Oct 31, 2012 at 10:18

freakish

57k12 gold badges141 silver badges181 bronze badges

Collectives™ on Stack Overflow

Insert a html tag in between an existing html tag programatically

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related