セッタ/ゲッタの練習ですか？
ゲットしたものを表示しなければなにもかわらないですね
HTMLにJavascriptで表を完成させたいのですが、表示の仕方がわかりません。
この後のコードとして必要なコードはなんでしょうか。
お願いいたします。
<!DOCTYPE html> <html> <head> <title>明日の話題</title> </head> <body> <table> <tr> <th>生徒</th> <th>国語</th> <th>数学</th> <th>理科</th> <th>社会</th> <th>英語</th> <th>合計値</th> <th>ランク</th> </tr> </table> <style> </style> <script> class Score { //クラスの指定 constructor(total, name, NL, math, science, society, english) { this._name = name; this._NL = NL; this._math = math; this._science = science; this._society = society; this._english = english; } //メソットの指定 get name() { return this._name; } get NL() { return this._NL; } get math() { return this._math; } get science() { return this._science; } get society() { return this._society; } get english() { return this._english; } get total() { return this._NL + this._math + this._science + this._society + this._english; } } const a = new Score(this.total, 'Aさん', 80, 70, 70, 50, 60); const b = new Score(this.total, 'Bさん', 60, 70, 40, 80, 60); const c = new Score(this.total, 'Cさん', 60, 70, 70, 60, 60); const d = new Score(this.total, 'Dさん', 80, 40, 40, 70, 70); const e = new Score(this.total, 'Eさん', 70, 70, 70, 60, 70); const arr = [ a.total, b.total, c.total, d.total, e.total, ]; console.log(arr); </script> </body> </html>
getしたものを表にしたいのですがどうしたら表示されるかわかりません
回答3件
1
テーブルにIDを追加し
html
1<table id="list">
script側でID取得を行い、テーブルの各セルに生徒5人分の設定を行う
ランク処理の方法を追記
js
1// Scoreクラスのコンストラクタに「index」を追加 2class Score { //クラスの指定 3 constructor(total, name, NL, math, science, society, english, index) { 4 5 ・・・省略・・・ 6 this._english = english; 7 // ランク変数 8 this._rank = 0; 9 // 固有番号値 10 this._index = index; 11 } 12 ・・・省略・・・ 13 get total() { return this._NL + this._math + this._science + this._society + this._english; } 14 // ランクのセッター、ゲッター 15 set rank(rank) { this._rank = rank; } 16 get rank() { return this._rank; } 17 // 固有番号のゲッター 18 get index() { return this._index; } 19} 20 21// クラス引数の最後に固有番号を追加 22const a = new Score(this.total, 'Aさん', 80, 70, 70, 50, 60, 1); 23const b = new Score(this.total, 'Bさん', 60, 70, 40, 80, 60, 2); 24const c = new Score(this.total, 'Cさん', 70, 70, 70, 60, 60, 3); 25const d = new Score(this.total, 'Dさん', 80, 40, 40, 70, 70, 4); 26const e = new Score(this.total, 'Eさん', 70, 70, 70, 60, 70, 5); 27 28// 固有番号をキーに固有番号対応クラスと合計値を設定 29let arr = { 30 [a.index]: [a, a.total], 31 [b.index]: [b, b.total], 32 [c.index]: [c, c.total], 33 [d.index]: [d, d.total], 34 [e.index]: [e, e.total] 35}; 36 37// 合計値を降順で並び替える 38let obj = Object.keys(arr).map((e) => ({key: e, value: arr[e][1]})); 39obj.sort((a, b) => { 40 if (a.value < b.value) return 1; 41 if (a.value > b.value) return -1; 42 return 0; 43}); 44 45// ランク値 46let rankNum = 1; 47// ランク重み値 48let rankNumWeight = 0; 49// 作業用合計値 50let tmpTotal = obj[0].value; 51// 一番点数が大きいものランクを設定 52arr[obj[0].key][0]._rank = rankNum; 53 54for (let i = 1; i < obj.length; i++) { 55 let index = obj[i].key; 56 57 // トータル点数が同じ場合はランク値を加算しない 58 if (obj[i].value == tmpTotal) { 59 arr[index][0]._rank = rankNum; 60 // ランク重み値を加算 61 rankNumWeight++; 62 } else { 63 // ランク値に重みを加算 64 rankNum += rankNumWeight + 1; 65 arr[index][0]._rank = rankNum; 66 67 // ランク重み値をリセット 68 rankNumWeight = 0; 69 // 作業用合計値を更新 70 tmpTotal = obj[i].value; 71 } 72} 73 74 75// 生徒リスト 76const studentArr = [ 77 a, b, c, d, e 78]; 79 80let listTable = document.getElementById('list'); 81 82// 生徒リスト分繰り返す 83studentArr.forEach(function (value) { 84 // テーブルの末尾に1行追加 85 let rows = listTable.insertRow(-1); 86 // 追加した行のセルに値をセット 87 rows.insertCell(-1).innerHTML = value.name; 88 rows.insertCell(-1).innerHTML = value.NL; 89 rows.insertCell(-1).innerHTML = value.math; 90 rows.insertCell(-1).innerHTML = value.science; 91 rows.insertCell(-1).innerHTML = value.society; 92 rows.insertCell(-1).innerHTML = value.english; 93 rows.insertCell(-1).innerHTML = value.total; 94 rows.insertCell(-1).innerHTML = value.rank; 95}); 96
このような感じでどうでしょうか？
投稿2022/05/13 02:25
編集2022/05/15 06:31
総合スコア835
回答へのコメント
// 生徒リスト
const studentArr = [
a, b, c, d, e
]; この作業は生徒のリストを定義しているのでしょうか。
はい。
全ての生徒の情報をテーブルに記載すると思ったので、生徒数分のリストを定義しました。
ありがとうございます！わかりやすくて助かりましたた。
合計値では、a~eの合計値を比べて良かった順に順位をつけたいと思っていて
同率の場合は同じ順位にしようと考えています。
その際に必要なコードって何になりますか？
https://java-beginner.com/practice-ranking/
参考になるかはわかりませんが、このサイトに記載されているコードでできそうな気がします。
こちらでも少々コード作成してみます。
ランク設定方法を追記しました。
コード自体が長くなり、かつ、複雑な感じになってしまっています。
あまり良い方法でないと思いますので、他の方の回答を参考にしてみてください。
1
Scoreオブジェクトから'<tr><td>名前<td>国語点数<td>数学点数...<td>合計値<td></tr>'のような文字列を作る関数を作るlet tbody = document.querySelector('tbody');を足すScoreの各オブジェクトに対して、tbody.insertAdjacentHTML('beforeend', 上記関数(scoreオブジェクト))を実行する
投稿2022/05/13 01:55
総合スコア18572
0
ベストアンサー
ランクはどうしたいのでしょうか？
javascript
1<table id="t1"> 2<tr> 3<th>生徒</th> 4<th>国語</th> 5<th>数学</th> 6<th>理科</th> 7<th>社会</th> 8<th>英語</th> 9<th>合計値</th> 10<th>ランク</th> 11</tr> 12</table> 13<script> 14class Score { 15 constructor( name, NL, math, science, society, english) { 16 this._name = name; 17 this._NL = NL; 18 this._math = math; 19 this._science = science; 20 this._society = society; 21 this._english = english; 22 this.setTable(); 23 } 24 setTable(){ 25 const tr=` 26 <tr> 27 <td>${this.name}</td> 28 <td>${this.NL }</td> 29 <td>${this.math}</td> 30 <td>${this.science}</td> 31 <td>${this.society}</td> 32 <td>${this.english}</td> 33 <td>${this.total}</td> 34 <td>-</td> 35 </tr>` 36 t1.insertAdjacentHTML('beforeend',tr); 37 } 38 get name() { return this._name; } 39 get NL() { return this._NL; } 40 get math() { return this._math; } 41 get science() { return this._science; } 42 get society() { return this._society; } 43 get english() { return this._english; } 44 get total() { return this._NL + this._math + this._science + this._society + this._english; } 45} 46 47const a = new Score( 'Aさん', 80, 70, 70, 50, 60); 48const b = new Score( 'Bさん', 60, 70, 40, 80, 60); 49const c = new Score( 'Cさん', 60, 70, 70, 60, 60); 50const d = new Score( 'Dさん', 80, 40, 40, 70, 70); 51const e = new Score( 'Eさん', 70, 70, 70, 60, 70); 52</script>
rank処理つき
javascript
1<table id="t1"> 2<tr> 3<th>生徒</th> 4<th>国語</th> 5<th>数学</th> 6<th>理科</th> 7<th>社会</th> 8<th>英語</th> 9<th>合計値</th> 10<th>ランク</th> 11</tr> 12</table> 13<script> 14const arr=[]; 15class Score { 16 constructor( name, NL, math, science, society, english) { 17 this.set('name',name); 18 this.set('NL',NL); 19 this.set('math',math); 20 this.set('science',science); 21 this.set('society',society); 22 this.set('english',english); 23 arr.push(this.total); 24 } 25 set(key,value){ 26 this[`_${key}`]=value; 27 } 28 setTable(){ 29 const tr=` 30 <tr> 31 <td>${this.name}</td> 32 <td>${this.NL }</td> 33 <td>${this.math}</td> 34 <td>${this.science}</td> 35 <td>${this.society}</td> 36 <td>${this.english}</td> 37 <td>${this.total}</td> 38 <td>${this.rank}</td> 39 </tr>` 40 t1.insertAdjacentHTML('beforeend',tr); 41 } 42 get name() { return this._name; } 43 get NL() { return this._NL; } 44 get math() { return this._math; } 45 get science() { return this._science; } 46 get society() { return this._society; } 47 get english() { return this._english; } 48 get total() { return this.NL + this.math + this.science + this.society + this.english; } 49 get rank() { return arr.filter(x=>x>this.total).length+1 } 50} 51 52const a = new Score( 'Aさん', 80, 70, 70, 50, 60); 53const b = new Score( 'Bさん', 60, 70, 40, 80, 70); 54const c = new Score( 'Cさん', 60, 70, 70, 60, 60); 55const d = new Score( 'Dさん', 80, 40, 40, 70, 70); 56const e = new Score( 'Eさん', 70, 70, 70, 60, 70); 57[a,b,c,d,e].forEach(x=>{ 58 x.setTable(); 59}); 60</script>
※調整しました
投稿2022/05/13 06:23
編集2022/05/13 09:36総合スコア110789
あなたの回答
tips
プレビュー
関連した質問
Q&A
ジャバ教えてください
Q&A
プログラミング初心者。HTMLやCSSで書いたコードをFileZilaでアップロードしたのですが、ホームページとして表示されません。どなたか原因を教えてください。
Q&A
electronでEditor.jsを使いたい
Q&A
スクロールできるテーブルの一番上の行を固定したい
Q&A
2つの画像を選択するフォームを作成し、それをlocalStorageやsessionStorageを使用してサーバーを介せず別ページで表示させたい
Q&A
textareaのクリックした位置にテキストを挿入したい
Q&A
フローティングウィンドウの不具合を解決したい
Q&A