自動ソートのできるテーブルのサンプル 📖

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、九日目の記事用。ヘッダ部分をクリックすると、その列をキーに表ソートします。押すたびに昇順と降順がトグルします。

プログラム: (→大)
＃テーブルを作成 テストデータ＝「名前,ふりがな,点数 太郎,たろう,55 花子,はなこ,100 一郎,いちろう,80」をCSV取得。 テストテーブル＝テストデータのテーブル作成。 昇順＝はい。 テストテーブルをクリックした時には、 # 三角のラベルをクリックした時も動くようにする もし、(対象.nodeName＝「TH」)または(対象.nodeName＝「SPAN」)ならば、: セル＝対象。 もし、(対象.nodeName＝「SPAN」)ならば、セル＝対象.parentNode。 ソート列＝セルのセル列番号。 ヘッダ＝テストデータの0を配列切り取り。 テストデータのソート列を表ソート。 もし、昇順＝はいでなければ、テストデータを配列逆順。 昇順=昇順*-1。 テストデータの0へヘッダを配列挿入。 テストテーブルをテストデータにテーブル更新。 記号＝「▲」 もし、昇順=はいならば、記号＝「▼」 ソート列に記号のソート記号追加。 ここまで。 ●(列に記号の)ソート記号追加 変数 全ヘッダ＝テストテーブルの「th」をDOM子要素全取得。 母艦＝DOM親要素。 全ヘッダを反復: 対象にDOM親部品設定。 もし、対象キー＝列ならば、: 記号のラベル作成。 それに{ "margin-left":"0.5em", "vertical-align":"middle", "font-size":"0.7em", "色":灰色 }をDOMスタイル一括設定。 母艦にDOM親部品設定。 ここまで。 ●(セルの)セル列番号 セル.cellIndexを戻す。 ここまで。