Разбивка HTML-таблицы на две разные таблицы - PullRequest
Новая
       4

Разбивка HTML-таблицы на две разные таблицы

2 голосов
/ 11 января 2011

Я пытаюсь напечатать таблицу с большим количеством столбцов.Я пришел с решением разбить столбцы на разные таблицы с разрыва страницы.Я хотел использовать JQuery для этого.Вот HTML, я новичок в JQuery, пожалуйста, помогите мне решить эту проблему.

Исходная структура HTML 

<table>
<tr>
    <th>Name</th>
    <th>Age</th>
 </tr>
 <tr>
    <td>Ami</td>
    <td>35</td>
 </tr>
 <tr>
    <td>jai</td>
    <td>34</td>
 </tr>

Ожидаемый выход HTML 

<html>
 <table>
    <tr>
        <th>Name</th>
        <th>Age</th>
     </tr>
     <tr>
        <td>Ami</td>
        <td>35</td>
     </tr>

 </table>

 <table>
    <tr>
        <th>Name</th>
        <th>Age</th>
     </tr>
     <tr>
        <td>Ami</td>
        <td>35</td>
     </tr>

 </table>
</html>

Возможно ли достичь ожидаемой структуры HTML в JQuery.

1 Ответ

8 голосов
/ 11 января 2011

один из возможных способов: 

$('<table>').append(
    $('table tr:first-child').clone(), 
    $('table tr').slice(Math.ceil($('table tr').length / 2))
).appendTo('body');

DEMO

Версия 2: 

var max = 2; // change this


var $t = $('table');
var $th = $('tr:first-child', $t).remove();
var l = $('tr',$t).length;

while(l > max){
    // extract trs with index larger than max and add them to a new table
    var $trs = $('tr',$t).filter(function(){ return $(this).index() < max; });   
    $('<table/>').append($trs).insertBefore($t);
    l-=max;
}
$('table').each(function(){ $(this).prepend($th.clone()); });

DEMO

...