dynamically add multiple rows to a table

Question

The following code works fine as i am able to add multiple 'tr' rows as i need it but at the same time multiple 'tbody' element is also created. So, I am trying to find a solution where i only create 'tbody' once and add multiple rows.

$results.each(function(){
       $('#tbl').append($('<tbody>')
                .append($('<tr>')
                .append('<td>' + Item_val + '</td>')
                .append('<td>' + Name_val + '</td>')
                .append('<td>' + No_val + '</td>'))                                
        );
});

<table id="tbl">
        <thead>
            <tr>
                <th>Item</th>
                <th>Name</th>
                <th>No</th>                    
            </tr>        
        </thead>        
</table>

iCollect.it Ltd · Accepted Answer · 2015-07-16 13:55:54Z

Browsers do not require a tbody to be appended and will add one behind the scenes.

Just add your rows:

results.each(function(){
       $('#tbl').append($('<tr>')
                .append('<td>' + Item_val + '</td>')
                .append('<td>' + Name_val + '</td>')
                .append('<td>' + No_val + '</td>'))                                
        );
});

Here is a simple test showing that a tbody is added automatically when a TR is added:

HTML

<table></table>

Code:

alert($('table tbody').length);   // alerts 0
$('table').append('<tr>'); 
alert($('table tbody').length);   // alerts 1

JSFiddle: http://jsfiddle.net/m2z2cmur/

Notes:

Although the HTML5 browser spec states a table may "directly contain TR elements", the parser in all(?) browsers use a backward-compatible approach where they insert a tbody when adding a tr (if no tbody is present)

@Chizzle: No. jQuery will close single tags if they are not auto-closed. "<tr>", "<tr/>" and "<tr></tr>" all do the same thing, so stick with a short version.

Mark Schultheiss · Accepted Answer · 2015-07-15 23:28:08Z

0

var mytablecontainer = $('#tbl');
var mytable = mytablecontainer.find('tbody');
if (!mytable.length){mytablecontainer.append($('<tbody>')}
mytable = mytablecontainer.find('tbody');
mytable.append()// rest of your appends

answered Jul 15, 2015 at 23:28

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

4 Comments

iCollect.it Ltd Over a year ago

This will work but is kind of pointless as tbody should always exist (as the browsers add it automatically to tables when TRs are added). Here is a simple example: jsfiddle.net/m2z2cmur

Mark Schultheiss Over a year ago

I never make assumptions based on browser historical behavior - look over the HTML5 specification history and there is some discussion regarding that topic - i.e. some stuff works just because browser makers just "did" it that way not because of the specification.

iCollect.it Ltd Over a year ago

Just did some searching of HTML browser specs myself and find that it is specifically part of the parser spec to insert a tbody when adding a tr (if no tbody is present): e.g. w3.org/html/wg/drafts/html/master/…

Mark Schultheiss Over a year ago

Yes, part of what I was not likely clear on was that the HTML5 spec has some of that in there. Thanks for posting the link to the specific reference!

Collectives™ on Stack Overflow

dynamically add multiple rows to a table

2 Answers 2

HTML

Code:

Notes:

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

Code:

Notes:

2 Comments

4 Comments

Related