2012-10-08 23 views
5

如何添加<thead><tbody>這使用jQuery?jquery add <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> 
+2

一個[表頭]創建一個表工作版本(http://www.w3.org/wiki/HTML/Elements/th)通常具有一個'thead'元件作爲'tbody'的兄弟姐妹,不是連續的多個頭。 – jbabey

+0

@ jbabey並非每個瀏覽器都添加了一個thead元素。他們確實增加了一個tbody。 – epascarello

回答

13

什麼,你需要做的是去除行並將它們添加到一個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

5

使用wrapAll而不是包裝

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

這是不正確的。這將導致'' – epascarello

+1

[的jsfiddle](http://jsfiddle.net/q224z/)示出該被破壞,不正確的解決方案。 – epascarello

+0

嘗試wrapAll(''); – AlxVallejo

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

,從數組

相關問題