<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>007 切换数据表格的行列</title> <style type="text/css"> table{ border: 1px solid #ccc; font-size: 14px; } table th, .header{ background: orange; color: #fff; padding:10px; } table td{ padding:10px; } </style> <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> <script type="text/javascript"> $(function() { $('#change').click(function(){ var $tableNew = $('<table></table'), $tableOld = $('table'); for (var i = 0; i < 4; i++) { var $trNew = $('<tr></tr>'); for (var j = 0; j < 4; j++) { var $tdNew = $('<td></td>'), content = $tableOld.find('tr:eq(' + j + ')').children().eq(i).html(); $tdNew.html(content); if (j == 0) { $tdNew.addClass('header'); } $trNew.append($tdNew); } $tableNew.append($trNew); } $('body').append($tableNew); }); }) </script> </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> <button id="change">change</button> </body> </html>
