divide a table

divide a table

I want to divide a table to two new table, this is my way, and hope the code can be more brief.

Script
  2. $(function() {
  3. var $devide = 2,
  4. $newTableWidth1 = 0,
  5. $newTableWidth2 = 0,
  6. $newTableStr1 = '<table id="newTable1">',
  7. $newTableStr2 = '<table id="newTable2">';
  9. $('table tr').each(function($i) {
  10. $newTableStr1 += $(this).is('[class]') ? '<tr class="' + $(this).attr('class') + '">' : '<tr>';
  11. $newTableStr2 += $(this).is('[class]') ? '<tr class="' + $(this).attr('class') + '">' : '<tr>';
  12. $(this).find('td').each(function() {
  13. // get new table 1 width
  14. if ($i == 0) {
  15. if ($(this).index() < $devide) {
  16. $newTableWidth1 += $(this).outerWidth();
  17. } else {
  18. $newTableWidth2 += $(this).outerWidth();
  19. }
  20. }
  22. // new table 1
  23. if ($(this).index() < $devide) {
  24. $newTableStr1 += $(this).is('[class]') ? '<td class="' + $(this).attr('class') + '">' + $(this).html() + '</td>' : '<td>' + $(this).html() + '</td>';
  25. } else {
  26. $newTableStr2 += $(this).is('[class]') ? '<td class="' + $(this).attr('class') + '">' + $(this).html() + '</td>' : '<td>' + $(this).html() + '</td>';
  27. }
  28. });
  29. $newTableStr1 += '</tr>';
  30. $newTableStr2 += '</tr>';
  31. });
  33. $newTableStr1 += '</table>';
  34. $newTableStr2 += '</table>';
  36. $('body').append($newTableStr1).append($newTableStr2);
  37. $('#newTable1').width($newTableWidth1);
  38. $('#newTable2').width($newTableWidth2);
  39. });

CSS
  2. <style>
  3. body {
  4. font-size: 12px;
  5. }
  6. table {
  7. border-collapse: collapse;
  8. margin: 4px 0;
  9. }
  10. tr, td {
  11. text-align: center;
  12. border: 1px solid black;
  13. }
  14. td {
  15. padding: 4px;
  16. }
  17. .yellow {
  18. background: yellow;
  19. }
  20. .gray {
  21. background: gray;
  22. }
  23. </style>

HTML
  2. <table width="400" border="0" cellspacing="0" cellpadding="0">
  3.     <tr>
  4.         <td>a</td>
  5.         <td>b</td>
  6.         <td>c</td>
  7.         <td>d</td>
  8.         <td>e</td>
  9.     </tr>
  10.     <tr>
  11.         <td>1</td>
  12.         <td>2</td>
  13.         <td class="gray">3</td>
  14.         <td>4</td>
  15.         <td>5</td>
  16.     </tr>
  17.     <tr class="yellow">
  18.         <td>6</td>
  19.         <td>7</td>
  20.         <td>8</td>
  21.         <td>9</td>
  22.         <td>10</td>
  23.     </tr>
  24.     <tr>
  25.         <td>11</td>
  26.         <td class="gray">12</td>
  27.         <td>13</td>
  28.         <td>14</td>
  29.         <td>15</td>
  30.     </tr>
  31.     <tr>
  32.         <td>16</td>
  33.         <td>17</td>
  34.         <td>18</td>
  35.         <td>19</td>
  36.         <td>20</td>
  37.     </tr>
  38. </table>