Q&A
問題なく動作することを確認できました。ご回答ありがとうございました。
以下のコードで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件
0
先にdataを加工して、合計値やランクを埋めてみては？
投稿2020/06/18 03:27
総合スコア116724
0
ベストアンサー
現状のコードをできるだけ生かすと、こんな感じです。
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
総合スコア36960
すいません、もう一点質問なのですが、上記のコードを生かしながら、どのようにコードを作成すればランクの計算ができるのでしょうか？以下のようにrankの関数を作成してj=7のときにテーブルタグで表示するようにしたいです。
function rank(c){
if (c===0) return "ランク";
}
function rank(c){
if (c===0) return "ランク";
var sums = []
for( var a = 1; a < data.length; a++){
sums.push( [ sumData(a), a ] );
}
sums.sort( function(x, y){
return -( x[0] - y[0] );
} );
for( var i = 0; i < sums.length; i++){
sums[i][2] = i+1;
}
sums.sort( function(x, y){
return ( x[1] - y[1] );
} );
return sums[c-1][2] ;
}
みたいな感じでできますが、かなり無駄なことをしています。先にdataに合計列とランク列を追加した方がいいです。
ご回答ありがとうございます。ちなみにどういう処理を行っているのでしょうか？それぞれどのような役割になっているかわかっていないです。
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]と計算文が違う理由はなんなのでしょうか？
→ここでは計算した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番目が順位です。
よく理解できました。ご丁寧なご説明誠にありがとうございます。
0
どうかな？ ランクも追加！
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>
投稿2020/06/18 03:40
編集2020/06/19 10:46退会済みユーザー
総合スコア0
偏差値や平均値までの計算方法までありがとうございます。内容確認して勉強させていただきます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/18 03:27
退会済みユーザー
2020/06/18 04:46
2020/06/18 05:12
退会済みユーザー
2020/06/18 15:52