動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>動的テーブル</title>
    <スタイル>
        .bigDiv{
            幅: 600ピクセル;
            マージン: 50px 自動;
        }
        テーブル{
            境界線: 黒実線 2px;
            幅: 500ピクセル;
            /*境界線は 1 つの境界線に結合されます*/
            境界線の折りたたみ: 折りたたみ;
        }
        th{
            背景色: ダークグレー;
            /*表のヘッダーの太字フォント*/
            フォントの太さ: 太字;
            /*フォント色 #ffffff: 白*/
            色: #ffffff;
        }
        th、td{
            境界線: 1px 黒一色;
            /* 幅と高さの動作を指定します。要素の幅と高さ（最小/最大プロパティ）を指定すると、ボックスの幅と高さに適用されます*/
            ボックスのサイズ: コンテンツボックス;
            テキスト配置: 中央;
            /*幅と高さを指定する*/
            幅: 50px;
            高さ: 30px;
            フォントサイズ: 14px;
        }
        。しかし{
            幅: 150ピクセル;
            マージン: 5px 400px;
            /*フレックスボックスモデルオブジェクトのすべての子要素の長さを同じにし、その中のコンテンツを無視します*/
            ディスプレイ: フレックス;
            /*フレックスボックスオブジェクトの<div>要素内の各項目の周囲にスペースを残す*/
            コンテンツの端揃え: flex-end;
        }
    </スタイル>
</head>
<本文>
<div class="bigDiv">
<テーブルの位置合わせ="center">
    <頭>
    <tr>
        <th>シリアル番号</th>
        <th>名前</th>
        <th>年齢</th>
        <th>性別</th>
        <th>連絡先番号</th>
    </tr>
    </thead>
    <t本文>
    <tr>
        <td>1</td>
        <td>シャオヤオ</td>
        <td>18</td>
        <td>男性</td>
        <td>12354546</td>
    </tr>
    <tr>
        <td>2</td>
        <td>シャオバイ</td>
        <td>19</td>
        <td>女性</td>
        <td>252323523</td>
    </tr>
    </tbody>
</テーブル>
<div class="but">
    <button type="button" onclick="addRow()">行を追加する</button>
    <button type="button" onclick="saveData()">データを保存する</button>
</div>
</div>
<スクリプト>
    変数ID;
    変数名;
    var 年齢;
    var セックス;
    var 電話;
    var tdArr = 新しい配列();
    関数addRow() {
        tbodyObj = document.getElementsByTagName("tbody")[0] とします。
        trObj = document.createElement("tr"); とします。
        tbodyObj.appendChild(trObj);
        // 5つのTDを作成
        (i = 0; i < 5; i++ とします) {
            tdObj = document.createElement("td"); とします。
            trObj.appendChild(tdObj);
            //入力ボックスオブジェクトを作成します。let inputObj = document.createElement("input");
            //入力オブジェクトの id 属性を設定します。inputObj.setAttribute("id",i);
            //各入力ボックスにフォーカス喪失イベントを追加します inputObj.addEventListener("blur",function () {
                スイッチ (this.id) {
                    ケース「0」:
                        id=この値;
                        壊す;
                    ケース「1」:
                        名前=この値;
                        壊す;
                    ケース「2」:
                        年齢=この値;
                        壊す;
                    ケース「3」:
                        性別=この値;
                        壊す;
                    ケース「4」:
                        電話番号=この値;
                        壊す;
                }
            });

            //入力がクリックされていないときに入力の境界線を非表示にします inputObj.style.border="0";
            //入力をクリックしたときに境界線を非表示にする inputObj.style.outline="none";
            //入力ボックスの幅を設定します inputObj.style.width="80px";
            //入力ボックスの高さを設定します inputObj.style.height="25px";
            //入力ボックスの余白を0に設定する
            入力オブジェクトスタイルマージン="0";
            //td を追加します tdObj.appendChild(inputObj);
            //tdObj を tdArr に追加します tdArr.push(tdObj);
        }
    }
    関数 saveData() {
        tdArr[0].innerHTML=id;
        tdArr[1].innerHTML=名前;
        tdArr[2].innerHTML=年齢;
        tdArr[3].innerHTML=性別;
        tdArr[4].innerHTML=電話;
        tdArr.length=0;
    }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: