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 最適化の概要 - クエリエントリの合計数

推薦する

HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN

水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...

MySQL 8.0.22 圧縮パッケージの完全なインストールと構成のチュートリアル図 (テスト済みで効果的)

1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...

JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

デザイン理論: デザインにおける階層

<br />原文: http://andymao.com/andy/post/80.ht...

サブメニューをクリックする効果を実現するJavaScript

この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...

Vueを使用して天気コンポーネントをロードする方法の詳細な説明

この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...

MySQL マルチテーブル結合クエリの詳細な説明

目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...

Web スライスとは何ですか?

IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...

React.cloneElement の使い方の詳しい説明

目次cloneElementの役割使用シナリオ新しい小道具を追加するプロップを変更するイベントカスタ...

Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例

この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...

Dockerでspringcloudプロジェクトをデプロイする方法

目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...

Mysqlは日付範囲の抽出方法を指定します

データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

JSはプログレスバーをドラッグして要素の透明度を変更することを実装しています

今日ご紹介したいのは、ネイティブ JS を使用してプログレス バーをドラッグし、要素の透明度を変更す...