編集出来るテーブルのサンプル

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、八日目の記事用。テーブルのセルを編集可能にし、データに編集内容を反映するまで。

エディタ

プログラム

「テーブルの内容を書き換えて、取得ボタンを押してみて下さい。」のラベル作成。
# テーブルを作成
テストデータ＝「名前,ふりがな,点数
太郎,たろう,55
花子,はなこ,100
一郎,いちろう,80」をCSV取得。
テストテーブル＝テストデータのテーブル作成。

# 元データを表示
「元データ：」を表示。
テストデータをJSONエンコードして表示。

# セルの設定
変数 全セル＝テストテーブルの「td」をDOM子要素全取得。
全セルを反復:
    対象.contentEditable＝true。# 編集可能にする
    対象の「blur」がDOMイベント発火した時には、:
        もし、対象.nodeName＝「TD」ならば、:
            # 改行を含むコピペ対策
            テキスト＝対象.textContent。
            対象にテキストをテキスト設定。
            # テーブル数値右寄せ
            もし、DOM部品オプション.「テーブル数値右寄せ」＝trueならば、
                テキストを数列か判定。
                もし、それがtrueならば、
                    対象の「行揃え」に「右」をDOMスタイル設定。
                違えば、
                    対象の「行揃え」に「左」をDOMスタイル設定。
                ここまで。
            ここまで。
            # セルの内容をデータに反映
            行＝対象のセル行番号。
            列＝対象のセル列番号。
            テストデータ[行][列]＝テキスト。

# セル内の改行入力を禁止する。
テストテーブルのキー押した時には、:
    もし、押されたキー＝「Enter」ならば、:
        対象イベントのDOMイベント処理停止。

# セルの行列番号を取得
●(セルの)セル行番号
    セル.parentNode.rowIndexを戻す。
ここまで。

●(セルの)セル列番号
    セル.cellIndexを戻す。
ここまで。

# 編集後データの表示
「編集後のデータを取得」のボタン作成。
それをクリックした時には、:
　　「編集後データ：」を表示。
    テストデータをJSONエンコードして表示。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ