- ベストアンサー
Tablesorterを2行一組でソートする
- jQueryのプラグイン「Tablesorter」を使用してテーブルのソートを行っていますが、要素が2行の場合に正しく機能しません。
- 「Tablesorter」を使ったテーブルのソート方法を教えてください。
- 要素が2行一組のテーブルのソートについての対応方法を教えてください。
- robertheindel
- お礼率12% (1/8)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
そのままそのプラグインを使いたいのであれば・・・って、ご提示のものはjqueryのプラグインではないみたいですが？ それはともかく、そのまま使いたいのであれば、2行を1行にしたtableをバックグラウンドで用意しておいて、ソートにはこれを利用することにして、表示用のtableはそれをレイアウト（1行を2行に）を変えてコピーするようにするという手が使えそうです。（コピーとイベントの処理部分はスクリプトを作成する必要がありますが） あるいはそのままやるなら、1行の内容をCSSで無理やり2行に見せちゃうとか。 マークアップは１セットを1行にしておいて行の高さを約2倍に設定しておき、CSSで右端のセル（ [テキスト] ってのは1セルですよね？）だけposition:absoluteなどでその行の中で下にずらして重ねて表示（このセルだけ高さを1倍、幅は全体分に設定）することで、見かけ上は2行のように見せることができそうです。 （但し、セル幅などは固定にしておかないと都合が悪そう。でも、ｔｒにposition:relativeを指定しておいても、ブラウザによって解釈が異なるようなので位置の指定には工夫が必要かも） とはいえ、これならそのままご提示のスクリプトが使えそうな気がしますが…（確認はしていません） 「そんな不自然なのは嫌」ということであれば、もとのスクリプトはn行で1セットという概念には対応していないと思われますので、スクリプト自体ををカスタマイズするしかないように思われます。
補足
ありがとうございます！ 試してみたのですが、table系にはrelativeがきかないようです・・ http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/ ＞[テキスト] ってのは1セルですよね？ その通りです。セルにならなくても良いのですが、 スクリプトを作成しない方法で何か解決策はないでしょうか。。
関連するQ&A
- TinyTableというスクリプトのソートについて
テーブルをソートできる下記のソースを使っているのですが、デフォルトで一列目の「ID」を降順でならばせたいのですがどのように設定をすれば良いでしょうか？ 【サンプルデモ】 http://sandbox.scriptiny.com/table-sorter/index.html 【参考サイト】 http://shanabrian.com/web/library/tiny_table.php 参考サイト内に、 1 <script type="text/javascript"> 2 var sorter = new TINY.table.sorter("sorter"); 3 // sorter.init(テーブルのID名, 初期ソート開始番号); 4 // （左セル 0番からが開始番号となります。） 5 // なお、初期ソートが不要であれば、,（カンマ）を含めて削除してください。 6 // 例：sorter.init("sample"); 7 sorter.init("sample", 1); とあったため、「sorter.init("sample", 0);」と変更したのですがどうしても「昇順」となってしまいます。 これをIDの数字が大きい順（降順）にデフォルトで並び替えるにはどのようにすれば良いでしょうか？ よろしくお願いいたします。
- ベストアンサー
- Java
- TinyTableというスクリプトのソートについて
テーブルをソートできる下記のソースを使っているのですが、デフォルトで一列目の「ID」を降順でならばせたいのですがどのように設定をすれば良いでしょうか？ 【サンプルデモ】 http://sandbox.scriptiny.com/table-sorter/index. … 【参考サイト】 http://shanabrian.com/web/library/tiny_table.php 参考サイト内に、 1<script type="text/javascript"> 2 var sorter = new TINY.table.sorter("sorter"); 3 // sorter.init(テーブルのID名, 初期ソート開始番号); 4 // （左セル 0番からが開始番号となります。） 5 // なお、初期ソートが不要であれば、,（カンマ）を含めて削除してください。 6 // 例：sorter.init("sample"); 7 sorter.init("sample", 1); とあったため、「sorter.init("sample", 0);」と変更したのですがどうしても「昇順」となってしまいます。 これをIDの数字が大きい順（降順）にデフォルトで並び替えるにはどのようにすれば良いでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 「java script」データソートページ送りが可能なテーブル
「java script」データソートページ送りが可能なテーブル java scriptはまったくの初心者です。 インターネット上にあったソースを使ったのですが、わからないことがあったので質問します。 データを、ソートで見ることができるようにしたいので、下記のコードを使いました。 [問題は] 1つのhtmlに一つの表を使う分にはちゃんと動くのですが、 ２つ以上表使おうとすると、一番上の表のソート機能は動くのですが、 ２つ目の表からはソート機能が使えなくなってしまいます。 どうしたら2つ目の表もソート機能が使えるようにするのはどうしたらよいですか？ [使用ソース] <table> <tr> <th>・・・</th> <th>・・・</th> </tr> <tr> <td>・・・</td> <td>・・・</td> </tr> <tr> <td>・・・</td> <td>・・・</td> </tr> </table> <div id="controls"> <div id="perpage"> <select onchange="sorter.size(this.value)"> <option value="5">5</option> <option value="10" selected="selected">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> <span>表示ページ数を選択できます。</span> </div> <div id="navigation"> <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" /> <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" /> <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" /> <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" /> </div> <div id="text">残りのページ数 <span id="currentpage"></span> of <span id="pagelimit"></span></div> </div> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; sorter.asc = "asc"; sorter.desc = "desc"; sorter.even = "evenrow"; sorter.odd = "oddrow"; sorter.evensel = "evenselected"; sorter.oddsel = "oddselected"; sorter.paginate = true; sorter.currentid = "currentpage"; sorter.limitid = "pagelimit"; sorter.init("table",1); </script> 以上よろしくお願いいたします。
- ベストアンサー
- オープンソース開発
- tableソート
新着順になっているテーブルをjqueryで名前ごとにまとめることはできますか？ スレ 名前 日時 ああ ここ 2014/1/31 いい たた 2014/1/20 ああ ここ 2014/1/10 ああ ここ 2014/1/01 こんな感じにしたいです ああ ここ 2014/1/31 └ ここ 2014/1/10 └ ここ 2014/1/01 いい たた 2014/1/20 html <table width="100%"> <tr> <th>スレ</th> <th>なまえ</th> <th>新着日時</th> </tr> <tbody> <tr><td>ああ</td><td>test1</td><td>2014/01/31</td></tr> <tr><td>いい</td><td>test2</td><td>2014/01/20</td></tr> <tr><td>ああ</td><td>test3</td><td>2014/01/10</td></tr> <tr><td>ああ</td><td>test4</td><td>2014/01/01</td></tr> </tbody> </table> クリックでのソートはいりません。表示したときにソートするのみで結構です よろしくお願いします
- ベストアンサー
- JavaScript
- HTMLテーブルのソートとヘッダ固定が可能なプラグインを教えてください
HTML以下の機能を持ったテーブルを実現したいと思います。 1. ソート 2. ヘッダの固定 何かよいプラグインがあれば教えてくれませんか？ お願いいたします。 現在は、以下のプラグインを使い ソート機能のみ実現しています。 jQuery 1.3.2 TableSorter 2.0.3 ここからの移行が簡単なものがあれば、なお助かります。
- 締切済み
- HTML
- jQueryのプラグイン「Tablesorter」で要素の削除
jQueryのプラグイン「Tablesorter」でテーブルのソートをさせているのですが、 動的に行を追加したり削除する場合に困っています。 $("#myTable").tablesorter(); のようにテーブルをソートさせると、削除したはずの行が復活してしまうのです。 これはなにか対策などはあるのでしょうか？ ご存知のかたがおられましたら是非教えていただきたいです。
- ベストアンサー
- JavaScript
- JavaScriptによる表のソート機能付与
avaScriptでソートに関する質問です。jQueryを使って簡潔な記述で実現したいのですが、tablesoterなどのプラグインは使用不可の条件で、Tableのデータを並び替える方法がなかなか見いだせません。例えば、以下のようなTableにソート機能を持たせるにはどのようなJavaScriptの記述が考えられるでしょうか？ <thead>の<img>の一方をクリックしたら昇順、もう一方をクリックしたら降順にしたいです。押された場所の項目に応じてそのように並び替えをしたいです。なお、ソートは<tbody>の部分のみでOKです。 <table> <thead> <tr> <th>年月<img src="01.gif"> <img src="02.gif"></th> <th>更新数<img src="01.gif"> <img src="02.gif"></th> <th>聴取率<img src="01.gif"> <img src="02.gif"></th> <th>平均金額<img src="01.gif"> <img src="02.gif"></th> <th>滞在時間<img src="01.gif"> <img src="02.gif"></th> </tr> </thead> <tbody> <tr> <td>2010年08月</td> <td>0</td> <td>22%</td> <td>30円</td> <td>0</td> </tr> <tr> <td>2010年07月</td> <td>2</td> <td>100.00%</td> <td>180円</td> <td>27日 +05:17</td> </tr> <tr> <td>2010年09月</td> <td>2</td> <td>100.00%</td> <td>190円</td> <td>27日 +05:17</td> </tr> </tbody> <tfoot> <tr> <td>合計</td> <td >2</td> <td>21.25%</td> <td>400円</td> <td>57日 +12:10</td> </tr> </tfoot> </table> 以上です。HTMLをいじるのはありです。 どうかよろしくお願い致します。
- 締切済み
- JavaScript
- 並び替えは、絶対テーブルでしかできませんか。
div要素でも並び替えがしたいです。 <div class="table"> <div class="row"> <div class="cell">内容1</div> <div class="cell">内容2</div> <div class="cell">内容3</div> </div> <div class="row"> <div class="cell">内容4</div> <div class="cell">内容5</div> <div class="cell">内容6</div> </div> </div> <style> #sort_table { border-collapse:collapse; } #sort_table td { border:1px solid lightgray; } #sort_table th { cursor:pointer; background-color:lightgray; } </style> 以上でもテーブルは作れます。しかし、これでは、並び替えができません。 https://blog.ver001.com/javascript-table-sort/ なぜなら通常はテーブル要素で書くからです。 しかしテーブルには弱点があり、<td>や<th>にしか、divや、pといったタグを置くことができません。 しかし、これだと、セルを変えることができません。 先ほどいただいた <script> function viewChange(){[Box1,Box2,Box3].forEach((a,b)=>a.style.display=sample.selectedIndex==b?'':'none')} window.onload = viewChange; </script> というご回答だと、1つのテーブルしか表示が不可能です。 これがdivだと何個も表示ができますが、いかんせん並び替えができないのです。 jsだけで、プログラムのインストールなし、オフラインでかつ、ごちゃごちゃしたjqueryも使わないというのは贅沢な願望でしょうか。 後僕は天才ではないので、断片的な情報から組み合わせて１つのものを完成させる能力はないです。 お願いです。力をお貸しください。
- ベストアンサー
- JavaScript
- JavaScriptでテーブルの行入れ替え
Javascriptでtable内の行を上下に移動させたいと思います。 横に↑ボタンと↓ボタンを用意し、クリックした分だけ上下に移動させるのが理想です。 ライブラリはJQueryやその外部ライブラリであれば使用可能ですが、 行内の要素(<TD>タグやその属性等)は別の処理で直接触りたい為、TABLE以下のタグが ライブラリの使用者から隠蔽されるようなライブラリの使用は難しいです。 ご存知の方がいらっしゃいましたらご回答の程、よろしくお願いします。
- ベストアンサー
- JavaScript
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
お礼
無事に完了しました！ 横幅は設定しなくても大丈夫で、td内にdivでもいけました。 本当に助かりました。丁寧に、有難うございます。