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 最適化の概要 - クエリエントリの合計数
目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...
目次1. MySQLをダウンロードする2. 圧縮パッケージを解凍する3. MySQLを初期化する4....
序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...
初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...
注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...
目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...
目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...
最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...
目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...
序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...
この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...
私たちは視覚の世界に住んでおり、多くの視覚効果に囲まれています。コンピューターの前にいても、屋外にい...
目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...
幅: 自動子要素(コンテンツ+パディング+境界線+余白を含む)は、親要素のコンテンツ領域全体を埋めま...
問題の説明最近、いくつかのマシンで、一日のさまざまな時間に次の警告メッセージが表示されました。 3月...