jQueryのプラグイン「Tablesorter」でテーブルのソートをさせているのですが、
ソートさせたい要素が2行だとうまくいかなくて困っています。
[要素1][要素2][要素3][要素4][要素5]←th
[要素1][要素2][要素3][要素4][要素5]
[テキストテキストテキストテキスト]
[要素1][要素2][要素3][要素4][要素5]
[テキストテキストテキストテキスト]
[要素1][要素2][要素3][要素4][要素5]
[テキストテキストテキストテキスト]
・・・
対応の仕方が分かる方、宜しくお願い致します。
http://www.scriptiny.com/2008/11/javascript-tabl …
No.1
- 回答日時:
そのままそのプラグインを使いたいのであれば・・・って、ご提示のものはjqueryのプラグインではないみたいですが?
それはともかく、そのまま使いたいのであれば、2行を1行にしたtableをバックグラウンドで用意しておいて、ソートにはこれを利用することにして、表示用のtableはそれをレイアウト(1行を2行に)を変えてコピーするようにするという手が使えそうです。(コピーとイベントの処理部分はスクリプトを作成する必要がありますが)
あるいはそのままやるなら、1行の内容をCSSで無理やり2行に見せちゃうとか。
マークアップは1セットを1行にしておいて行の高さを約2倍に設定しておき、CSSで右端のセル( [テキスト] ってのは1セルですよね?)だけposition:absoluteなどでその行の中で下にずらして重ねて表示(このセルだけ高さを1倍、幅は全体分に設定)することで、見かけ上は2行のように見せることができそうです。
(但し、セル幅などは固定にしておかないと都合が悪そう。でも、trにposition:relativeを指定しておいても、ブラウザによって解釈が異なるようなので位置の指定には工夫が必要かも)
とはいえ、これならそのままご提示のスクリプトが使えそうな気がしますが…(確認はしていません)
「そんな不自然なのは嫌」ということであれば、もとのスクリプトはn行で1セットという概念には対応していないと思われますので、スクリプト自体ををカスタマイズするしかないように思われます。
この回答への補足
ありがとうございます!
試してみたのですが、table系にはrelativeがきかないようです・・
http://gyauza.egoism.jp/clip/archives/2007/11/07 …
>[テキスト] ってのは1セルですよね?
その通りです。セルにならなくても良いのですが、
スクリプトを作成しない方法で何か解決策はないでしょうか。。
No.2ベストアンサー
- 回答日時:
#1です。
>試してみたのですが、table系にはrelativeがきかないようです・・
そのようですね。 位置関係を指定するのが大変面倒になりますね。
書いた手前、試みにいろいろやってみました。
(相当にいい加減なので、あくまでもご参考までにしてください)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
#sorter, #sorter * { margin:0; padding:0; }
#sorter { border-collapse:collapse; empty-cells:show; }
#sorter th, #sorter td { border:1px solid #888; }
#sorter td { height:40px; vertical-align:top; }
#sorter th.last { display:none; }
#sorter .last { position:absolute; /*display:block;*/ margin-left:-556px; margin-top:20px; width:554px; height:20px; background-color:#fff; }
/* 試しに幅を設定 */
#sorter .w1 { width:50px; }
#sorter .w2 { width:100px; }
#sorter .w3 { width:200px; }
/* IE6
#sorter tr { position:relative; }
#sorter .last { position:absolute; margin-left:-556px; top:20px; width:554px; height:20px; background-color:#fff; }
*/
</style>
</head>
<body>
<div>test</div>
<table class="sortable" id="sorter">
<tr>
<th class="nosort w1">No</th>
<th class="w2">Title1</th>
<th class="w2">Title2</th>
<th class="w3">Title3</th>
<th class="w2">Title4</th>
<th class="last">Text</th>
</tr>
<tr>
<td>1</td>
<td>item1-1</td>
<td>item1-2</td>
<td>item1-3</td>
<td>item1-4</td>
<td class="last">text1 text1 text1</td>
</tr>
<tr>
<td>2</td>
<td>item2-1</td>
<td>item2-2</td>
<td>item2-3</td>
<td>item2-4</td>
<td class="last">text2 text2 text2</td>
</tr>
<tr>
<td>3</td>
<td>item3-1</td>
<td>item3-2</td>
<td>item3-3</td>
<td>item3-4</td>
<td class="last">text3 text3 text3</td>
</tr>
<tr>
<td>4</td>
<td>item4-1</td>
<td>item4-2</td>
<td>item4-3</td>
<td>item4-4</td>
<td class="last">text4 text4 text4</td>
</tr>
</table>
</body>
</html>
手元のfx3.5、Opera10ではそれっぽく見えますが、IE6はダメですね。
いずれにしろブラウザによって違うみたいなので、ハックをしないとならないと思われます。
(ハックはほとんど知らないので試してません)
CSSに詳しい方をお待ちします。
javascriptでのスタイル変更も試してみました。位置は絶対指定ですんなり合せられますが、幅の取得がborderがあるとIE系が異なるので、結局同じような分岐が必要になってくるみたい。
無事に完了しました!
横幅は設定しなくても大丈夫で、td内にdivでもいけました。
本当に助かりました。丁寧に、有難うございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
ハイパーリンクを別ウインドウ...
-
javascriptで指定するtrを削除...
-
データバインドで生成したテー...
-
テキストだけonCllickを検知したい
-
一覧から選択した行の行番号を...
-
▲▲JavaScriptに詳しい人見てく...
-
表内の列や行の結合に関して
-
slickのレスポンシブ > center...
-
フォームの値が0だったら空白...
-
return trueとreturn falseの用...
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
XMLHttpRequestを利用してPHPへ...
-
FormのonsubmitでJavaスクリプ...
-
フィールドを有効(enabled?)に...
-
Javascriptの"return "について
-
objectのindex値って取れますか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
マウスをブラウザの外に出した...
-
Selenium.ChromeDriverの使い方...
-
「オブジェクトは、このプロパ...
-
リンク色の変更
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
テーブル内に表示されている数...
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
おすすめ情報