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で質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
cssで、表示されるテキストによ...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
EXCELからhtmlへの変換で罫線が...
-
テーブルのヘッダとボディの幅...
-
テーブルの装飾
-
中に<table></table>が使えるア...
-
HTML <td></td>タグ セル内余...
-
表の中の列の順番を入れ替える...
-
テーブルタグのセルの幅の一部...
-
テーブルのセルにアンカー
-
おしゃれなテーブル
-
テーブルの外側の線を消す
-
テーブル結合 縦横両方するには?
-
htmlのtable内に画像
-
表の1列だけをCSSを使って右揃...
-
テーブルの入れ子について
-
文字の中央そろえを一括で指定...
-
テーブルの任意の列を非表示に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
逆L字の表(table)組み
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報