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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • AngularJS は、テーブル テーブル td セルをクリックして入力ボックス/編集可能な状態を変更する例を実装します。
  • js で動的なテーブルを生成し、各セルにクリック イベントを追加する方法
  • vuejs 要素テーブル テーブル行の追加、変更、行の個別削除、行の一括削除
  • angularJs テーブルの追加、削除、変更、クエリメソッド
  • JS は動的テーブルの追加、変更、削除を実装します (推奨)
  • テーブルの cellPadding と cellSpacing を動的に変更する JS メソッド
  • テーブル行の列範囲を動的に変更する js メソッド
  • テーブルの背景色を変更するJavaScriptの例のコード共有
  • データアイランドにバインドされたテーブル内のテキストをクエリし、jsコードの表示方法を変更します。

<<:  Dockerfileの指示と基本構造の説明

>>:  MySQL 最適化の概要 - クエリエントリの合計数

推薦する

MySQL 実践演習 シンプルなライブラリ管理システム

目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...

MySQLデータベースの圧縮バージョンのインストールと設定に関する詳細なチュートリアル

目次1. MySQLをダウンロードする2. 圧縮パッケージを解凍する3. MySQLを初期化する4....

Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順

序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...

Vue 実践における実用的な小さな魔法のまとめ

初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...

docker を使って sonarqube を構築する方法

目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...

JSはスネークゲームを実装する

目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...

Reactのref属性を深く理解する方法

目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...

mysql MDLメタデータロックの詳細な分析

序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...

JavaScriptは行削除機能を備えたテーブルを動的に生成します

この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...

燃える炎効果の英語フォント16種類をシェアする

私たちは視覚の世界に住んでおり、多くの視覚効果に囲まれています。コンピューターの前にいても、屋外にい...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明

幅: 自動子要素(コンテンツ+パディング+境界線+余白を含む)は、親要素のコンテンツ領域全体を埋めま...

Linux システムによって報告される xfs_vm_releasepage 警告問題に対処する方法

問題の説明最近、いくつかのマシンで、一日のさまざまな時間に次の警告メッセージが表示されました。 3月...