2009-06-25 9 views
1

基本的にこのような行を持つテーブルがあります。jQueryを使用して特定のパターンでテーブル行を移動する

  • ノーマル行
  • ノーマル行
  • ノーマル行
  • 集計行
  • ノーマル行
  • 集計行
  • ノーマル行
  • ノーマル行
  • 集計行

したがって、基本的にX「通常の行」は、「要約行」が常に続きます。要約行には、通常行のデータの集計が表示されます。私は実行時に集計を計算するので、集計する通常の行の後に「要約行」が配置されます。

私がする必要があるのは、それぞれの「要約行」を実行時に「前の通常行」の集まりの上に移動することです。だから私はで終わる:

  • 集計行
  • ノーマル行
  • ノーマル行
  • ノーマル行
  • 集計行
  • ノーマル行
  • 集計行
  • ノーマル行
  • 通常行

...など

だから、彼らに適切なCSSクラスを与えることによって、クラスは=「概要」クラス=「ノーマル」と言う、私はそれぞれの「集計行」と一致する記述されたセレクタのクエリを希望それを先行する最初の「通常の行」の上に効果的に移動します。

最もエレガントなjqueryの方法は何ですか?

答えて

1

次の概略デモhereを参照してください。最後の要約行から始め、前の要約行の後に移動するようにアプローチしました。もちろん最初のサマリには行がないので、これをチェックしてtbodyの最初の行に移動する必要があります。

+0

redsquare、このjsbin.comを試してみてください...私のfav! :) {あなたの例:http://jsbin.com/ezije - URLに追加/編集したいですか? – balexandre

+0

私は知っている、私はjsbinのいくつかのビットをデバッグするのを助けた。 簡単なデモのためにペーストビンがより速く動作することがわかりました。 – redsquare

+0

それは素敵でエレガントな赤い正方形です。あなたの貢献に感謝します。 – Aaron

0

私はあなたが

<table> 
    <tbody> 
    <tr>Normal Row 
    <tr>Normal Row 
    <tr>Normal Row 
    <tr>Summary Row 
    <tbody> 
    <tr>Normal Row 
    <tr>Summary Row 
    <tbody> 
    <tr>Normal Row 
    <tr>Normal Row 
    <tr>Summary Row 
</table> 

HTHのようなものに、あなたのマークアップを変更した場合、何をしやすくなるかもしれないと思います。

関連する問題