作品 ID: 2917

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

公開

日本語プログラミング言語「なでしこ」 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エンコードして表示。

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: アドベントカレンダー2024, サンプル
利用バージョン: 3.6.37
アクセス数(累計): 122
アクセス数(今月): 55
更新日時: 2024/12/05 15:41 編集: 2024/12/08 07:50

⭐⭐

作品公開情報

交流

コメントを取得中...