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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL 最適化の概要 - クエリエントリの合計数
水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...
1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...
JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...
MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...
<br />原文: http://andymao.com/andy/post/80.ht...
この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...
この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...
目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...
IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...
目次cloneElementの役割使用シナリオ新しい小道具を追加するプロップを変更するイベントカスタ...
この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...
目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...
データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...
Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...
今日ご紹介したいのは、ネイティブ JS を使用してプログレス バーをドラッグし、要素の透明度を変更す...