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

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