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>

yambejp

2022/05/13 02:24

セッタ/ゲッタの練習ですか？ゲットしたものを表示しなければなにもかわらないですね

sawakuun

2022/05/13 03:36

getしたものを表にしたいのですがどうしたら表示されるかわかりません

行動規範の内容に同意します

回答3件

テーブルに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

k.a_teratail

総合スコア845

sawakuun

2022/05/13 09:01

// 生徒リスト const studentArr = [ a, b, c, d, e ];　　　　この作業は生徒のリストを定義しているのでしょうか。

k.a_teratail

2022/05/13 09:10

はい。全ての生徒の情報をテーブルに記載すると思ったので、生徒数分のリストを定義しました。

sawakuun

2022/05/13 09:16

ありがとうございます！わかりやすくて助かりましたた。合計値では、a~eの合計値を比べて良かった順に順位をつけたいと思っていて同率の場合は同じ順位にしようと考えています。その際に必要なコードって何になりますか？

k.a_teratail

2022/05/13 09:42

https://java-beginner.com/practice-ranking/ 参考になるかはわかりませんが、このサイトに記載されているコードでできそうな気がします。こちらでも少々コード作成してみます。

k.a_teratail

2022/05/15 06:36

ランク設定方法を追記しました。コード自体が長くなり、かつ、複雑な感じになってしまっています。あまり良い方法でないと思いますので、他の方の回答を参考にしてみてください。

行動規範の内容に同意します

Score オブジェクトから '<tr><td>名前<td>国語点数<td>数学点数...<td>合計値<td></tr>' のような文字列を作る関数を作る
let tbody = document.querySelector('tbody'); を足す
Score の各オブジェクトに対して、tbody.insertAdjacentHTML('beforeend', 上記関数(scoreオブジェクト)) を実行する

投稿2022/05/13 01:55

int32_t

総合スコア20880

ベストアンサー

ランクはどうしたいのでしょうか？

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>