[編集モード] データを追加していけるテーブルのサンプル

日本語プログラミング言語「なでしこ」 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"][列]を戻す。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] データを追加していけるテーブルのサンプル

素材のアップロード