HTMLでテーブルの並び替え

質問

HTMLでテーブルの並び替えで質問です。
以下テーブルの1行目各項目名をクリックすると対象列の昇順、さらにクリックで降順、再度クリックで昇順が行いたいと思っております。

<form name="nForm">
<table>
<thead>
<tr><th>項目Ａ</th><th>項目Ｂ</th><th>項目Ｃ</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

fujillin · ベストアンサー

ご提示のサイトで使用しているものの配布元はここ（↓）だと思いますが、マルチキーでのソートもできるみたいでなかなかよくできている感じですね。
　http://tablesorter.com/docs/index.html

その機能を利用した方が簡単だと思いますので、それを使えるように考え方を変えるのではいけませんか？
（さすがに、inputタグの中まで参照してくれるようなライブラリは探したところで無いと思いますので）

＜考え方１＞
ご提示のテーブルに非表示の列などを追加しておいて、入力値はそのままその列のセルの値として反映させる。
inputの列をキーにソートする場合は、キーをこの非表示の列に置き換えてソートさせる。

＜考え方２＞
考え方1と似ていますが、テーブルの表示は全てテキストにしておいて、ユーザ入力をしたい列ではセルをクリックしたらinput要素を生成して入力を受付けるというUIに変更する。（入力終了時に、入力値をセルの値としてinput要素は削除する）
こちらの方法だと、キーの置き換えなどもしなくて済むので、tablesorterとのやり取りなどはほとんど考えなくても済みそうですね。

＜考え方３＞
formの送信を行なっているのかいないのか不明ですが、考え方２だと送信してもinput要素がないので送信されなくなってしまいます。
それなので、考え方１の表示/非表示を逆転しておいて、入力のUIには考え方２を用いるという方法。（input要素が非表示）
多分、HTMLソースの出力もphpなどから行なっているのではないかと推測しますが、この方法なら出力時に『inputタグを出力したらそのセルは非表示にしておいて、（例えば）次の列にセルを追加して、同じ値をそのまま表示』にする程度の変更でよさそう。

サーバー側の処理などHTML以外の仕組みがどのようになっているかによって手間が変わってくると思いますが、全体像がよくわかりませんので、実際にどのような方法が一番良いのかは適宜ご判断ください。

ご参考になれば…

お礼

回答ありがとうございます。

回答２を参考にしてテーブルの内容をすべてセルの値としました。
よくよく考えたら変更値の表示のためにテキストフィールドを使用していましたが
<td id="test">10</td>として、「document.getElementById("test").innerHTML」でセルの読込書込を行い、並び替えは従来のテーブルのソートを行うことで導きたい答えを出すことが出来ました。

この度は質問自体が分かり難くご面倒をお掛けしました。

回答No.2

yyr446

prototype.jsベースですが、このライブラリー「Tablekit」使えば、ご希望の事が出来そうな気がします。

http://millstream.com.au/view/code/tablekit/
http://millstream.com.au/upload/code/tablekit/index.html

これのEditableとかsortableを使えそう、PHPも必要ですが..

補足

回答ありがとうございます。
「Tablekit」も「TableSorter」と同じ動きである事を確認しております。
記述自体は「TableSorter」の方が容易です。

Editableを指定したときの画面は一見フォームのようですがフォームのようには扱うことが出来ないようです。

回答No.1

nitto3

面倒ですが、容量もアップしますが、
並べ替えたものをそれぞれアップしてそこにリンクさせたらいいでしょう。

補足

回答ありがとうございます。

項目Ｃのvalueはその時々の条件で変動する為、予めデータを取る事が出来ません。