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

ソース

プログラム

# テーブルを作成
テストデータ＝「名前,ふりがな,点数
太郎,たろう,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"][列]を戻す。
ここまで。

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: アドベントカレンダー2024, サンプル
利用バージョン: 3.6.39
アクセス数(累計): 329
アクセス数(今月): 15
バグ報告: 0件
更新日時: 2024/12/24 07:47 編集: 2024/12/27 09:10

作品公開情報

交流

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

プログラム

作品情報

コメント