2011-01-10 20 views
2

多数のカラムを持つテーブルを印刷しようとしています。私は、列をページ区切りで別のテーブルに分割するソリューションを用意しました。私はそれを行うためにJQueryを使いたいと思っていました。ここにHTMLがあります。私はJQueryを初めて使っています。この問題を解決するのを手伝ってください。HTMLテーブルを2つの異なるテーブルに分割する

オリジナル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の構造を実現することが可能です。

+0

そして、あなたはすべての名前は、そのようになりたいですか? 名前年齢Ami 35 名前年齢Jai 34 ? – Marnix

+0

私は彼らがフォーマットを忘れてしまったと思います – dqhendricks

答えて

7

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

+0

あなたのソリューションは、私がカラムを基にしてテーブルを壊すことを望んでいたことを除いて、私が探していたものに似ています。しかし、サンプルコードは私の問題の第一歩です。どうもありがとう。 – Nrusingha

+0

サー..このコードは実行されていると同時に私はテーブルの代わりにグリッドを使用しています。どのように私はこれを解決することができます – Sankar

+0

もう1つの提案は、印刷時にグリッド内の15レコードの後に​​ページ区切りを使用することができます – Sankar

関連する問題