jQuery如何添加<thead>和<tbody>元素

Question

我该如何使用jQuery添加<thead>和<tbody>？问题在于我的表格有1或2个th行。

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

- Hello-World

---

一个table header通常有一个thead元素作为tbody的同级元素，而不是在一行内有多个头部。 - jbabey

@jbabey 并不是每个浏览器都会添加 thead 元素。但它们会添加 tbody。 - epascarello

Answer 1

你需要做的是删除这些行并将它们附加到 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 示例 ​

- epascarello

Answer 2

使用 wrapAll 而不是 wrap。

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

- YogeshWaran

---

这是不正确的。它会导致 <tbody><thead><tr><th></th></tr></thead></tbody>。 - epascarello

jsFiddle 显示此代码已经失效，不是正确的解决方案。 - epascarello

你可以尝试这样做：$table.find('tr:has(th)').wrapAll('<thead></thead>'); $table.find('thead').prependTo($table); - Rasheed Jahjah

如果您发现自己来到这里是因为尝试使用 ASP 数据网格或网格视图，您可以使用此解决方案 https://dev59.com/d3VC5IYBdhLWcg3wZwJT。 - Michael

Answer 3

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

从数组创建表格的工作版本

- Andrew Day