jQuery add and add

Question

How do I add <thead> and <tbody> this using jQuery?

the problem is my table has 1 or 2 th rows?

$('#myTable tr:has(th)').wrap('<thead></thead>');

<table id="myTable">

<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>  
</table>

a [table header](http://www.w3.org/wiki/HTML/Elements/th) generally has one `thead` element as a sibling of `tbody`, not multiple heads inside a row. — jbabey, Oct 08 '12 at 12:40
@jbabey not every browser adds a thead element. They do add a tbody. — epascarello, Oct 08 '12 at 12:56

epascarello · Accepted Answer · 2012-10-08T12:52:31.113

16

What you need to do is remove the rows and append them to a thead element

var myTable = jQuery("#myTable");
var thead = myTable.find("thead");
var thRows =  myTable.find("tr:has(th)");

if (thead.length===0){  //if there is no thead element, add one.
    thead = jQuery("<thead></thead>").appendTo(myTable);    
}

var copy = thRows.clone(true).appendTo("thead");
thRows.remove();

jsFiddle exmaple

edited Oct 08 '12 at 12:52

answered Oct 08 '12 at 12:42

epascarello

204,599
20
195
236

YogeshWaran · Answer 2 · 2016-09-21T16:00:00.417

7

use wrapAll instead of wrap

$('#myTable tr:has(th)').wrapAll('<thead></thead>');
$("#myTable thead").prependTo("#myTable")

edited Sep 21 '16 at 16:00

answered Oct 08 '12 at 12:42

YogeshWaran

2,291
4
24
32

1

This is incorrect. It will result in `` – epascarello Oct 08 '12 at 12:48
1

[jsFiddle](http://jsfiddle.net/q224z/) showing this is broken and an incorrect solution. – epascarello Oct 08 '12 at 12:55
1

You can try this: $table.find('tr:has(th)').wrapAll(''); $table.find('thead').prependTo($table); – Rasheed Jahjah Jun 17 '16 at 09:06
if you found your way here because you are trying to use an asp datagrid or gridview, you can use this solution instead https://stackoverflow.com/questions/309101/how-do-i-get-gridview-to-render-thead – Michael Jul 01 '19 at 20:25

score 0 · Answer 3 · answered May 11 '17 at 12:51

function createTable(data) {
    var str = "";
    str += '<table><thead>';
    str += '<tr><td>Pos</td><td>Ref</td></tr></thead><tbody>';
    for (var item in data.recentList) {
        str += '<tr>';
        for (idata in data.recentList[item]) {
            str += '<td>' + data.recentList[item][idata] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody></table>';
    $('body').append(str);
}

Working version that creates a table from an array

jQuery add and add

3 Answers3

Linked