<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
table{
border: 1px solid #ccc;
font-size: 14px;
}
table th{
background: orange;
color: #fff;
padding:10px;
}
table td{
padding:10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
<tr>
<td>数据1-1</td>
<td>数据1-2</td>
<td>数据1-3</td>
<td>数据1-4</td>
</tr>
<tr>
<td>数据2-1</td>
<td>数据2-2</td>
<td>数据2-3</td>
<td>数据2-4</td>
</tr>
<tr>
<td>数据3-1</td>
<td>数据3-2</td>
<td>数据3-3</td>
<td>数据3-4</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var $table = $('table'), rows=[];
$('tr', $table).each(function(){
var tr = $(this),cells = [];
$('td,th', tr).each(function(){
cells.push($(this));
});
rows.push(cells);
});
for(var colNum = 0; colNum < rows[0].length; colNum++){
var tr = $('<tr/>').appendTo($table);
$.each(rows, function(i,row){
row[colNum].appendTo(tr);
});
};
$('tr:empty', $table).remove();
</script>