jQuery 添加 <thead> 并添加 <tbody>答案

【问题标题】：jQuery add <thead> and add <tbody>jQuery 添加 <thead> 并添加 <tbody>
【发布时间】：2012-09-28 17:07:06
【问题描述】：

如何使用 jQuery 添加 <thead> 和 <tbody>？

问题是我的表有 1 或 2 行？

$('#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>

【问题讨论】：

一个table header 通常有一个thead 元素作为tbody 的兄弟元素，而不是一行内的多个头部。
@jbabey 并不是每个浏览器都添加了一个thead元素。他们确实添加了一个 tbody。

标签： javascript jquery

【解决方案1】：

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);
}

从数组创建表的工作版本

【讨论】：

【解决方案2】：

使用 wrapAll 代替 wrap

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

【讨论】：

这是不正确的。这将导致<tbody><thead><tr><th></th></tr></thead></tbody>
jsFiddle 表明这是一个错误的解决方案。
你可以试试这个：$table.find('tr:has(th)').wrapAll(''); $table.find('thead').prependTo($table);
如果您因为尝试使用 asp 数据网格或网格视图而在这里找到了自己的方式，您可以改用此解决方案 stackoverflow.com/questions/309101/…

【解决方案3】：

您需要做的是删除行并将它们附加到一个 thead 元素

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

【讨论】：