全行コメント付与はいかつい、、、【Day13 of 100】

毎行毎行、、、解説ほんんんんまありがとう!

// 2. 定義した項目ごとに「行(tr)」と「セル(td)」を作る
    rowDefinitions.forEach(([label, className, rowId, defVal]) => {
        const tr = document.createElement('tr'); // 1行(<tr>)作成
        if (className) tr.className = className; // スタイル用のクラス名があれば設定

        // 行の左端(項目名)のセルを作成
        const tdLabel = document.createElement('td');
        tdLabel.innerText = label;
        tdLabel.className = 'sticky-col'; // CSSで左側に固定するためのクラス
        tr.appendChild(tdLabel);

        if (rowId === 'section') {
            // 見出し行(【収入】など)の場合、データの代わりに空のセルで埋める
            for (let i = 0; i < COLUMN_COUNT; i++)
                tr.appendChild(document.createElement('td'));
        } else {
            // 通常のデータ行の場合、101列分のセルを作る
            for (let col = 0; col < COLUMN_COUNT; col++) {
                const td = document.createElement('td');
                // 合計行や残高行(計算結果を表示するだけのセル)の場合
                if (

この辺、解説ないとわからんって、、、。ループのループはむずいって、、、でもこんな解説、毎行毎行コーディングできる先輩がわざわざ書かないよね。書いてちょ!ってお願いしたらしばかれるよ。

それをAIくんはやってくれるんだもんね。おそろしいよ、関西弁で言うと「いかつい」よ

Tableタグ、ナメてた、、、、

HTMLタグはホームページ作ったりブログ書いたりでまぁまぁ見てきたけど、書いてきたけど

Tableタグって自分で手入力て組んだりしないからちゃんとした構造理解してなかったのよね。適当にエディターで書いてた。だから

tableの下にthead(頭)とtbody(本体)が入ってて

theadにもtbodyもtr(row 行)で構成されていて

各々のtr には theadの場合はth(header 頭、見出し)が、tbodyの場合にはtd(data データ)が入ってて

、、、、、ってのが一瞬で頭に浮かんでなかった。

↑ テーブルタグ構造、手入力で書いてみたら

それぞれ必要な要素にCSSの設定されてるクラスも足してみた。

コードのループで今何を作ってるか、比較的頭に入るようになった。

今日の練習成果

https://kiyo4810.github.io/autocal/table_practice.html


コメントを残す

猫でデザインとプログラミングを学ぶをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む