Javascript 点数の合計値計算と出力方法

以下のコードでA~Eさんそれぞれの点数の合計値を計算して表の作成を行いたいです。
ただ、function sumDataで合計値を計算した後にfunction makeTable内の
cell.appendChild(document.createTextNode(sumData()));//合計値の入力
でsum値を入れ込んでいくプログラムにしたいです。
問題点は合計値の計算のところでsumが配列化されていないことと認識はしているのですが
どのようにプログラムすれば良いかわかってないです。
また他にいい方法があれば教えていただきたいです。
お手数おかけしますが、どなたかお力添えいただけると助かります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="User_Class.css">
  <meta charset="UTF-8">
  <title>ユーザクラスの作成</title>
</head>
<body>
  <div id="table"></div>      
  <script>
  // 合計値の計算
    function sumData(data){
        for( var a = 1; a < data.length; a++){
        var sum = ["合計値"];
        for (var b=1; b < data[1].length; b++) {
        sum = sum + data[a][b];
        }
        return (sum);
        }
    }
　//ランクの計算
    
  //表の作成関数
  function makeTable(data, sumData, tableId){
    // 表の作成開始
    var rows=[];
    var table = document.createElement("table");
    // 表に2次元配列の要素を格納
    for( var i = 0; i < data.length; i++){
        rows.push(table.insertRow(-1));  // 行の追加
        for(var j = 0; j < data[0].length+2; j++){
            var cell=rows[i].insertCell(-1);
            if(j==6){
            cell.appendChild(document.createTextNode(sumData()));//合計値の入力
            } else if(j==7){
            //cell.appendChild(document.createTextNode(sumData));//ランクの入力
            }
            else{
            cell.appendChild(document.createTextNode(data[i][j]));
            }
            // 背景色の設定
            if(i==0){
            cell.style.backgroundColor = "green";
            cell.style.color="white";
            cell.style.textAlign="center"; 
            }else{
            cell.style.backgroundColor = "white"; 
            }
            // 指定したdiv要素に表を加える
            document.getElementById(tableId).appendChild(table);
        }
    }
  }
    
    
    window.onload = function(){ 
 　　// 表の動的作成
　　makeTable(data,sumData,"table");
　　};      
 　　//const name  = ['生徒', '国語', '数学', '理科', '社会', '英語', '合計値','ランク'];  
  　var data = [
  　    ['生徒', '国語', '数学', '理科', '社会', '英語'],
  　    ["Aさん", 80, 70, 70, 50, 60],
       ["Bさん",60, 70, 40, 80, 60],
       ["Cさん", 60, 70, 70, 60, 60],
       ["Dさん",80, 40, 40, 70, 70],
       ["Eさん",70, 70, 70, 60, 70],
       ];
  </script>
  
</body>
</html>

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

回答3件

先にdataを加工して、合計値やランクを埋めてみては？

投稿2020/06/18 03:27

yambejp

総合スコア116724

yambejp

2020/06/18 03:27

var data = [ ['生徒', '国語', '数学', '理科', '社会', '英語'], ["Aさん", 80, 70, 70, 50, 60], ["Bさん",60, 70, 40, 80, 60], ["Cさん", 60, 70, 70, 60, 60], ["Dさん",80, 40, 40, 70, 70], ["Eさん",70, 70, 70, 60, 70], ]; var head=data.shift().concat(['合計値','ランク']); data.forEach(x=>x.push(x.slice().splice(1,5).reduce((x,y)=>x+y))); var sum=data.map(x=>x[6]); data.forEach(x=>x.push(sum.filter(y=>x[6]<y).length+1)); data.unshift(head); console.log(data)

退会済みユーザー

2020/06/18 04:46

別解ありがとうございました。こちらでも別途チャレンジしてみたいと思います。こちらの方がシンプルに思えてきましたが、あまり内容がわかってないです。申し訳ないですが、以下の内容は何をしているか教えてもらえないでしょうか？ data.forEach(x=>x.push(x.slice().splice(1,5).reduce((x,y)=>x+y))); data.forEach(x=>x.push(sum.filter(y=>x[6]<y).length+1)); またランク順位づけの計算もできるのでしょうか？

yambejp

2020/06/18 05:12

前者が合計値を計算して、途中で合計値の集合体sumをはさんで後者がランクを計算しています

退会済みユーザー

2020/06/18 15:52

理解できました。ご回答ありがとうございます。

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

ベストアンサー

現状のコードをできるだけ生かすと、こんな感じです。

js
1    function sumData(data){
2        for( var a = 1; a < data.length; a++){
3        var sum = ["合計値"];
4        for (var b=1; b < data[1].length; b++) {
5        sum = sum + data[a][b];
6        }
7        return (sum);
8        }
9    }

↓

js
1    function sumData(a){
2        if (a===0) return "合計値";
3        var sum = 0;
4        for (var b=1; b < data[a].length; b++) {
5        sum = sum + data[a][b];
6        }
7        return (sum);
8        
9    }

js
1            cell.appendChild(document.createTextNode(sumData()));//合計値の入力

↓

js
1            cell.appendChild(document.createTextNode(sumData(i)));//合計値の入力

私だったら、先にdataに合計列を追加してからテーブルに出力するかもしれません。

投稿2020/06/18 02:00

Lhankor_Mhy

総合スコア36960

退会済みユーザー

2020/06/18 04:38

問題なく動作することを確認できました。ご回答ありがとうございました。

退会済みユーザー

2020/06/18 15:55

すいません、もう一点質問なのですが、上記のコードを生かしながら、どのようにコードを作成すればランクの計算ができるのでしょうか？以下のようにrankの関数を作成してj=7のときにテーブルタグで表示するようにしたいです。 function rank(c){ if (c===0) return "ランク"; 　　　 }

Lhankor_Mhy

2020/06/19 02:29

退会済みユーザー

2020/06/19 06:17

ご回答ありがとうございます。ちなみにどういう処理を行っているのでしょうか？それぞれどのような役割になっているかわかっていないです。 for( var a = 1; a < data.length; a++){ sums.push( [ sumData(a), a ] ); } →ここでは計算したsumの配列を作成しているのですか？ sums.sort( function(x, y){ return -( x[0] - y[0] ); } ); →ここのプログラムがよくわからないです。 for( var i = 0; i < sums.length; i++){ sums[i][2] = i+1; } →とりあえずランク配列に1~5まで順位関係なく配列に入れ込んでる感じですか？ →イマイチ、どこで順位計算しているのかわかってないです。 sums.sort( function(x, y){ return ( x[1] - y[1] ); } ); →ここのプログラムの内容がわからないです。x[1]-y[1]の意味とx[0]-[y[0]と計算文が違う理由はなんなのでしょうか？

Lhankor_Mhy

2020/06/19 06:34

→ここでは計算したsumの配列を作成しているのですか？その通りですが、インデックスもくっつけています。 →ここのプログラムがよくわからないです。合計の降順でソートしてます。 →とりあえずランク配列に1~5まで順位関係なく配列に入れ込んでる感じですか？ →イマイチ、どこで順位計算しているのかわかってないです。合計の降順でソートしてますから、上から1,2,3...と入れていけばそれが順位になります。 →ここのプログラムの内容がわからないです。x[1]-y[1]の意味とx[0]-[y[0]と計算文が違う理由はなんなのでしょうか？インデックスでソートし、元の順番に戻しているからです。動作を例示すると、以下のような感じです。 330, 1 310, 2 320, 3 300, 4 340, 5 ↓ 340, 5 330, 1 320, 3 310, 2 300, 4 ↓ 340, 5, 1 330, 1, 2 320, 3, 3 310, 2, 4 300, 4, 5 ↓ 330, 1, 2 310, 2, 4 320, 3, 3 300, 4, 5 340, 5, 1 3番目が順位です。

退会済みユーザー

2020/06/19 07:14

よく理解できました。ご丁寧なご説明誠にありがとうございます。

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

どうかな？　ランクも追加！

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<title>ユーザクラスの作成</title>
5<style>
6#hoge thead th { background: green; color: white }
7#hoge tbody tr td:first-of-type { background: rgba(0,200,0,.1)}
8#hoge tbody tr td:nth-of-type(n-1) { text-align: right; }
9</style>
10<body>
11<table border="1" id="hoge">
12  <thead>
13    <tr><th>生徒 <th>国語 <th>数学 <th>理科 <th>社会 <th>英語 <th>合計値 <th>ランク
14  <tbody>
15</table>
16
17<script>
18const
19  data = [
20    ["Aさん", 80, 70, 70, 50, 60],
21    ["Bさん", 60, 70, 40, 80, 60],
22    ["Cさん", 60, 70, 70, 60, 60],
23    ["Dさん", 80, 40, 40, 70, 70],
24    ["Eさん", 70, 70, 70, 60, 70],
25  ],
26  
27  sum = (a, b)=> a + b,
28  order = (a, b)=> a[6] !== b[6] ? a[6] < b[6]: false,
29  order2 = (a, b)=> a[8] > b[8],
30  cell = (r, c) => (r.insertCell ().textContent = c, r),
31  row = (t, r) => (r.reduce (cell, t.insertRow ()), t);
32
33//合計値を計算し配列の最後に追加、ついでに成績順と連番も追加
34data.forEach ((rec, idx) => rec.push (rec.slice (1).reduce (sum), 0, idx));
35
36//成績順で並び替え
37data.sort (order);
38//成績順の番号を付加
39data.forEach ((rec, i)=> rec[7] = i + 1);
40//元に戻す
41data.sort (order2);
42//連番は捨てる
43data.forEach (rec=> rec.pop ());
44
45//表を生成
46data.reduce (row, document.querySelector ('#hoge tbody'));
47
48</script>
49

偏差値は必要ないの？

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<title>ユーザクラスの作成</title>
5<style>
6#hoge thead th { background: green; color: white }
7#hoge tr td:first-of-type { background: rgba(0,200,0,.1)}
8#hoge tr td:nth-of-type(n-1) { text-align: right; }
9#hoge tfoot {background: rgba(255,0,0,.1)}
10#hoge tr td:nth-of-type(n+7) { background: rgba(0,0,255,.1);}
11</style>
12<body>
13<table border="1" id="hoge">
14  <thead>
15    <tr><th>生徒 <th>国語 <th>数学 <th>理科 <th>社会 <th>英語 <th>合計値 <th>ランク <th>偏差値
16  <tbody>
17  <tfoot>
18</table>
19
20<script>
21const
22  data = [
23    ["Aさん", 80, 70, 70, 50, 60],
24    ["Bさん", 60, 70, 40, 80, 60],
25    ["Cさん", 60, 70, 70, 60, 60],
26    ["Dさん", 80, 40, 40, 70, 70],
27    ["Eさん", 70, 70, 70, 60, 70],
28  ],
29  
30  sum = (a, b)=> a + b,
31  order = (a, b)=> a[6] !== b[6] ? a[6] < b[6]: false,
32  order2 = (a, b)=> a[9] > b[9],
33  cell = (r, c) => (r.insertCell ().textContent = c, r),
34  row = (t, r) => (r.reduce (cell, t.insertRow ()), t);
35
36//合計値を計算し配列の最後に追加、ついでに成績順と連番も追加
37data.forEach ((rec, idx) => rec.push (rec.slice (1).reduce (sum), 0, 0, idx));
38//平均
39let av = data.reduce((a,r)=>(r.slice(1,7).forEach((r,i)=>a[i]=r+(a[i]||0)),a),[]).map(a=>a/data.length);
40//合計値の標準偏差
41let std = (data.map (r=>(r[6]-av[5])**2).reduce(sum)/data.length)**.5;
42//偏差値計算
43data.forEach (rec=> rec[8] = ((rec[6]-av[5])/std * 10 +50).toFixed(2));
44//成績順で並び替え
45data.sort (order);
46//成績順の番号を付加
47data.forEach ((rec, i)=> rec[7] = i + 1);
48//元に戻す
49data.sort (order2);
50//連番は捨てる
51data.forEach (rec=> rec.pop ());
52
53//表を生成
54data.reduce (row, document.querySelector ('#hoge tbody'));
55[["平均",...av,"--","--"]].reduce (row, document.querySelector ('#hoge tfoot'));
56
57</script>
58

見直ししました。
同点の場合の順番の付加方法の変更。それにともなうソートの省略。
平均の表示を少数をまるめる。
かなり短くなりました。

js
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<title>ユーザクラスの作成</title>
5<style>
6#hoge thead th { background: green; color: white }
7#hoge tr td:first-of-type { background: rgba(0,200,0,.1)}
8#hoge tr td:nth-of-type(n-1) { text-align: right; }
9#hoge tfoot {background: rgba(255,0,0,.1)}
10#hoge tr td:nth-of-type(n+7) { background: rgba(0,0,255,.1);}
11</style>
12<body>
13<table border="1" id="hoge">
14  <thead>
15    <tr><th>生徒 <th>国語 <th>数学 <th>理科 <th>社会 <th>英語 <th>合計値 <th>ランク <th>偏差値
16  <tbody>
17  <tfoot>
18</table>
19
20<script>
21const
22  data = [
23    ["Aさん", 80, 70, 70, 50, 60],
24    ["Bさん", 60, 70, 40, 80, 60],
25    ["Cさん", 60, 70, 70, 60, 60],
26    ["Dさん", 80, 40, 40, 70, 70],
27    ["Eさん", 70, 70, 70, 60, 70],
28    ["Fさん", 50, 70, 70, 60, 90],
29  ],
30  len = data.length,
31
32  sum = (a, b)=> a + b,
33  cell = (r, c) => (r.insertCell ().textContent = c, r),
34  row = (t, r) => (r.reduce (cell, t.insertRow ()), t);
35
36//合計値を計算し配列の最後に追加、ついでに成績順追加
37data.forEach (r => r.push (r.slice (1).reduce (sum)));
38//平均
39let av = data.reduce((a,r)=>(r.slice(1,7).forEach((r,i)=>a[i]=r+(a[i]||0)),a),[]).map(a=>(a/len).toFixed(1));
40//合計値の標準偏差
41let std = (data.map (r=>(r[6]-av[5])**2).reduce(sum)/len)**.5;
42//成績順を付加
43data.forEach (r=> r[7]= data.filter (q => r[6] < q[6]).length + 1);
44//偏差値計算
45data.forEach (r=> r[8] = ((r[6]-av[5])/std * 10 + 50).toFixed(2));
46
47//表を生成
48data.reduce (row, document.querySelector ('#hoge tbody'));
49[["平均",...av,"--","--"]].reduce (row, document.querySelector ('#hoge tfoot'));
50</script>