jsはシングルクリックでテーブルを変更することを実装します

Pure jsは、参照用にワンクリックで編集可能なテーブル（トランスクリプトに似たもの）を実装しています。具体的な内容は次のとおりです。

機能: トランスクリプト内のテーブルをクリックしてデータを変更し、入力数値のサイズ (たとえば、0 未満で 100 以下) を確認します。合計スコア列には合計スコアが加算されます (es6 テンプレート文字列を使用)。

結果：

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        テーブル{
            マージン: 0 自動;
            zインデックス:999999;
            境界線の折りたたみ: 折りたたみ;
        }
        番目 {
         背景色: #4CAF50;
         /* 背景画像: 線形グラデーション(右へ、#eea2a2 0%、#bbc1bf 19%、#57c6e1 42%、#b49fda 79%、#7ac5d8 100%); */
         色: 白;
}
        テーブル th、tr、td{
            幅:100ピクセル;
            テキスト配置: 中央;
        }
        テーブル入力{
            境界線:なし;
            アウトライン: なし;
            幅: 100%;
        }
        .inputClass{
            幅:80ピクセル;
            高さ:100%
        }

    </スタイル>
</head>
<本文>
    <div style="position: relative;margin-top: 200px;text-align:center">
        <h2 style="margin-bottom: 50px;">スコア登録フォーム</h2>
        <div> 要素
            <表の境界線="1">
                <頭>
                    <th>学生番号</th>
                    <th>名前</th>
                    <th>言語</th>
                    <th>数学</th>
                    <th>英語</th>
                    <th>合計スコア</th>
                </thead>
                <t本文>
                </tbody>
            </テーブル>
        </div>
    </div>
</本文>
<スクリプト>
    // 配列 let data = [
        {
            id:1101,
            名前:「シャオ・ワン」
            英語:100,
            数学:80、
           英語:91,
            合計:271
        },
        {
            id:1102,
            名前:「シャオ・ゼン」
            英語:88,
            数学:87,
            英語:92,
            合計:267
        },
        {
            id:1103,
            名前:「シャオ・ジャオ」
            英語:75,
            数学:20,
            英語:86,
            合計:181
        },
        {
            id:1104,
            名前:「シャオ・ゾウ」
            英語:65,
            数学:81,
            英語:83,
            合計:229
        }
    ]
    window.onload = 関数(){
        初期化データ()
    }
    //データを初期化する//テンプレートがデータを入力するfunction initdata(){
        tbodyinner = document.getElementsByTagName("tbody")[0] とします。
        html = '' とします
        for(let i=0;i<data.length;i++){
            html+=`
            <tr>
                <td>${データ[i].id}</td>
                <td>${データ[i].name}</td>
                <td name="grade" class="chinese">${data[i].Chinese}</td>
                <td name="grade" class="math">${data[i].Math}</td>
                <td name="grade" class="english">${data[i].English}</td>
                <td class="allscore">${parseInt(data[i].中国語)+parseInt(data[i].数学)+parseInt(data[i].英語)}</td>
            </tr>
            `
        }
        // tbody.innerHTML="..."tbodyにコンテンツを追加 tbodyinner.innerHTML = html
        getNode()
    }
    // クリックイベントをリッスンする function getNode(){
        subject = document.getElementsByName("grade") とします。
        for(let i=0;i<subject.length;i++){
            subject[i].addEventListener('click',function(){
                編集(これ)
            })
        }
    }
    //マウス入力ポイント function edit(i){
        inputlen = document.getElementsByTagName('input').length とします。
        oldvalue = i.innerHTML とします。
        入力長==0の場合{
            // タグを空に設定する i.innerHTML = ''
            // 入力オブジェクトを追加 let inp = document.createElement("input")
            inp.value = 古い値
            inp.classList.add("入力クラス")
            // 子ノードを追加 i.appendChild(inp)
            // テキスト内のコンテンツを取得する inp.select()
            // フォーカスを失ったイベント inp.onblur = function(){
                inp.value<=100&&inp.value>=0の場合{
                    i.innerHTML = inp.value
                    val1 = i.parentNode.childNodes[5].innerHTMLとする
                    val2 = i.parentNode.childNodes[7].innerHTMLとする
                    val3 = i.parentNode.childNodes[9].innerHTMLとする
                    i.parentNode.childNodes[11].innerHTML = parseInt(val1)+parseInt(val2)+parseInt(val3)
                }それ以外{
                 
                    return alert("データ値が正しくありません。再入力してください!");
                }
            }
        }
    }
</スクリプト>
</html>

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

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