2014-07-23 81 views
0

有沒有一種方法(我不知道它的正確詞)扭曲與jQuery表?用一個函數什麼的?如何轉置HTML表格?

例如,我有一個這樣的表。

<table> 
    <tr> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Table1 我希望它像這樣

<table> 
    <tr> 
     <th></th> 
     <td></td> 
    </tr> 
    <tr> 
     <th></th> 
     <td></td> 
    </tr> 
    <tr> 
     <th></th> 
     <td></td> 
    </tr> 
</table> 

enter image description here

回答

4

試試這個代碼

<style> 
td { padding:5px; border:1px solid #ccc;} 
</style> 
<script> 
$("a").click(function(){ 
    $("table").each(function() { 
     var $this = $(this); 
     var newrows = []; 
     $this.find("tr").each(function(){ 
      var i = 0; 
      $(this).find("td").each(function(){ 
       i++; 
       if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } 
       newrows[i].append($(this)); 
      }); 
     }); 
     $this.find("tr").remove(); 
     $.each(newrows, function(){ 
      $this.append(this); 
     }); 
    }); 

    return false; 
}); 

</script> 
<table> 
    <tr> 
     <td>Heading1</td> 
     <td>Heading2</td> 
     <td>Heading3</td> 
    </tr> 

    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
</table> 


<p><a href="#">Do it.</a></p> 

不要忘了鏈接必要(jquery1.6)文件和適當的html標籤。

嘗試給鏈接http://jsfiddle.net/CsgK9/2/

看到此鏈接爲原始視圖 https://stackoverflow.com/a/6298066

+1

重新發布時的解決方案,請給予信貸到原來的一個:http://stackoverflow.com/a/6298066 – zhirzh