作品 ID: 2920

セル幅を変更出来るテーブルのサンプル

公開

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、九日目の記事用。ヘッダ部分をドラッグしてセル幅を変更出来ます。

ソース

プログラム

# テーブルを作成
テストテーブル＝「名前,ふりがな,点数
太郎,たろう,55
花子,はなこ,100
一郎,いちろう,80」のテーブル作成。

# ヘッダの設定
変数 全ヘッダ＝テストテーブルの「th」をDOM子要素全取得。
母艦＝DOM親要素。
全ヘッダを反復:
    # ヘッダの余白サイズを調べ、ヘッダの余白は0にする。
    WINDOWの「getComputedStyle」を対象でJSメソッド実行。
    余白サイズ＝それ.padding。//.余白 //できない
    最小幅＝それ.width。
    対象.余白＝0。
    # ヘッダのテキストを新しく作ったdivの中にうつす
    テキスト＝対象のテキスト取得。
    対象に空をテキスト設定。
    対象にDOM親部品設定。
    「div」のDOM部品作成。
    それにテキストをテキスト設定。
    # リサイズの設定。horizontalが横幅。
    # overflowがvisibleになっているとresizeが効かない
    # min-widthでヘッダの幅より小さくならないようにする。
    # ヘッダの余白をうつす
    それに{
        "resize":"horizontal",
        "overflow":"hidden",
        "min-width":最小幅,
        "余白":余白サイズ
    }をDOMスタイル一括設定。
母艦にDOM親部品設定。

作品について

作品情報

作品を編集

雪乃☆雫作

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

⭐

作品公開情報

交流

コメントを取得中...