![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
HTMLでテーブルの並び替えで質問です。
以下テーブルの1行目各項目名をクリックすると対象列の昇順、さらにクリックで降順、再度クリックで昇順が行いたいと思っております。
<form name="nForm">
<table>
<thead>
<tr><th>項目A</th><th>項目B</th><th>項目C</th></tr>
</thead>
<tbody>
<tr><td>20</td><td>い</td><td><input type="text" id="TX[0]" name="TX[0]" value="20"></td></tr>
<tr><td>30</td><td>あ</td><td><input type="text" id="TX[1]" name="TX[1]" value="50"></td></tr>
<tr><td>10</td><td>お</td><td><input type="text" id="TX[2]" name="TX[2]" value="30"></td></tr>
<tr><td>55</td><td>え</td><td><input type="text" id="TX[3]" name="TX[3]" value="10"></td></tr>
<tr><td>90</td><td>う</td><td><input type="text" id="TX[4]" name="TX[4]" value="15"></td></tr>
</tbody>
</table>
</form>
いくつかの方法を試してみたのですが思った結果が出ない為お知恵をお借りできないでしょうか?
http://jsajax.com/Articles/jQueryTableSorter/1120
の方法は試行してみましたがテキストフィールドの並び替えがnameの値で並び替えが掛ります。
value(変動値)での並び替えを行うことが必要です。
No.3ベストアンサー
- 回答日時:
ご提示のサイトで使用しているものの配布元はここ(↓)だと思いますが、マルチキーでのソートもできるみたいでなかなかよくできている感じですね。
http://tablesorter.com/docs/index.html
その機能を利用した方が簡単だと思いますので、それを使えるように考え方を変えるのではいけませんか?
(さすがに、inputタグの中まで参照してくれるようなライブラリは探したところで無いと思いますので)
<考え方1>
ご提示のテーブルに非表示の列などを追加しておいて、入力値はそのままその列のセルの値として反映させる。
inputの列をキーにソートする場合は、キーをこの非表示の列に置き換えてソートさせる。
<考え方2>
考え方1と似ていますが、テーブルの表示は全てテキストにしておいて、ユーザ入力をしたい列ではセルをクリックしたらinput要素を生成して入力を受付けるというUIに変更する。(入力終了時に、入力値をセルの値としてinput要素は削除する)
こちらの方法だと、キーの置き換えなどもしなくて済むので、tablesorterとのやり取りなどはほとんど考えなくても済みそうですね。
<考え方3>
formの送信を行なっているのかいないのか不明ですが、考え方2だと送信してもinput要素がないので送信されなくなってしまいます。
それなので、考え方1の表示/非表示を逆転しておいて、入力のUIには考え方2を用いるという方法。(input要素が非表示)
多分、HTMLソースの出力もphpなどから行なっているのではないかと推測しますが、この方法なら出力時に『inputタグを出力したらそのセルは非表示にしておいて、(例えば)次の列にセルを追加して、同じ値をそのまま表示』にする程度の変更でよさそう。
サーバー側の処理などHTML以外の仕組みがどのようになっているかによって手間が変わってくると思いますが、全体像がよくわかりませんので、実際にどのような方法が一番良いのかは適宜ご判断ください。
ご参考になれば…
回答ありがとうございます。
回答2を参考にしてテーブルの内容をすべてセルの値としました。
よくよく考えたら変更値の表示のためにテキストフィールドを使用していましたが
<td id="test">10</td>として、「document.getElementById("test").innerHTML」でセルの読込書込を行い、並び替えは従来のテーブルのソートを行うことで導きたい答えを出すことが出来ました。
この度は質問自体が分かり難くご面倒をお掛けしました。
No.2
- 回答日時:
prototype.jsベースですが、このライブラリー「Tablekit」使えば、ご希望の事が出来そうな気がします。
http://millstream.com.au/view/code/tablekit/
http://millstream.com.au/upload/code/tablekit/in …
これのEditableとかsortableを使えそう、PHPも必要ですが..
この回答への補足
回答ありがとうございます。
「Tablekit」も「TableSorter」と同じ動きである事を確認しております。
記述自体は「TableSorter」の方が容易です。
Editableを指定したときの画面は一見フォームのようですがフォームのようには扱うことが出来ないようです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
TRタグの余白をcssで設定するには
-
EXCELからhtmlへの変換で罫線が...
-
ASP GridViewで1レコード2行を...
-
colspanを使うと正しく表示でき...
-
ホームページ 表の上の余白を...
-
html・cssで日付をキレイに揃え...
-
テーブルのセルにアンカー
-
テーブルの行の高さを指定する...
-
掲示板//インラインフレーム内...
-
cssで、表示されるテキストによ...
-
テーブルタグのセルの幅の一部...
-
テーブルの入れ子について
-
EXCELのセル内にHTMLタグを含む...
-
テーブルの枠線とテキストフィ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
中に<table></table>が使えるア...
-
HTMLのテーブルで桁をそろ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
ホームページ 表の上の余白を...
-
逆L字の表(table)組み
-
スタイルシートで colspan=3と...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
テーブルのセルにアンカー
-
表の1列だけをCSSを使って右揃...
-
テーブルの装飾
-
tableでcolspanを使うと次行以...
おすすめ情報