データを追加していけるテーブルのサンプル 📖

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、25日目の記事用。行追加機能を付けた編集出来るテーブル。

プログラム: (→大)
# テーブルを作成 テストデータ＝「名前,ふりがな,点数 太郎,たろう,55 花子,はなこ,100 一郎,いちろう,80」をCSV取得。 テストテーブル＝テストデータのテーブル作成。 テストテーブルのテーブル編集可能。 確認ボタンは「データ確認」のボタン作成。 確認ボタンをクリックした時には、 テストデータをJSONエンコードして表示。 ここまで。 追加ボタンは「一行追加」のボタン作成。 追加ボタンをクリックした時には、 テストテーブルにテーブル行追加 ここまで。 ●(テーブルの)テーブル編集可能 変数 全セル＝テーブルの「td」をDOM子要素全取得。 全セルを反復。テーブルの対象に編集可能セル設定。。。 # セル内の改行入力を禁止する。 テーブルのキー押した時には、: もし、押されたキー＝「Enter」ならば、: 対象イベントのDOMイベント処理停止。 ここまで。 ●(テーブルに)テーブル行追加 空行＝空配列。追加行＝テストデータの表行数。 テストデータの表列数回。空行に空を配列追加。。。 テーブルの[テストデータの表行数,0]を[空行]にテーブルセル変更。 # 追加された行の全セルに編集可能設定を付ける テストデータ[追加行]＝空配列。 テストデータの表列数回 テストデータ[追加行][回数-1]＝空。 テーブルから[追加行,回数-1]のテーブルセル取得。 テーブルのそれに編集可能セル設定。 ここまで。 ここまで。 ●(テーブルのセルに)編集可能セル設定 # 最初のセルからセルの高さを取得 WINDOWの「getComputedStyle」を(テーブルから[1,0]のテーブルセル取得)でJSメソッド実行。 セル高さ＝それ.height。//セル高さを表示。 セルの「高さ」にセル高さをDOMスタイル設定。 セル.contentEditable＝true。# 編集可能にする セルの「blur」がDOMイベント発火した時には、: もし、対象.nodeName＝「TD」ならば、: # 改行を含むコピペ対策 テキスト＝対象.textContent。 対象にテキストをテキスト設定。 # テーブル数値右寄せ もし、DOM部品オプション.「テーブル数値右寄せ」＝trueならば、 テキストを数列か判定。 もし、それがtrueならば、 対象の「行揃え」に「右」をDOMスタイル設定。 違えば、 対象の「行揃え」に「左」をDOMスタイル設定。 ここまで。 ここまで。 # セルの内容をデータに反映 行＝対象のセル行番号。 列＝対象のセル列番号。 もし、(テストデータの表行数)≦行ならば、テストデータ[行]＝空配列。 テストデータ[行][列]＝テキスト。 ここまで。 ●(セルの)セル行番号 セル.parentNode.rowIndexを戻す。 ここまで。 ●(セルの)セル列番号 セル.cellIndexを戻す。 ここまで。 ●(テーブルから行列の)テーブルセル取得 変数 [行,列]＝行列。 テーブル["rows"][行]["cells"][列]を戻す。 ここまで。