原始HTML结构

Question

我正在尝试打印包含大量列的表。我找到了一个解决方案，通过分页符将列分成不同的表。我想用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>

是否有可能在JQuery中实现预期的HTML结构。

Answer 1

一种可能的方式：

$('<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

将HTML表分成两个不同的表

原始HTML结构

预期的HTML输出

1 个答案: