JavaScript最大値最小値

<hr> <p>1年A組試験結果</p> <table border=1 id="table"> <thead> <td>学籍番号</td> <td>名前</td> <td>点数</td> </thead> <tbody> <tr> <td>100</td> <td id="table1">田中</td> <td class="table1" >63</td> </tr> <tr> <td>101</td> <td id="table1">佐藤</td> <td class="table1" >83</td> </tr> <tr> <td>102</td> <td id="table1">鈴木</td> <td class="table1" >20</td> </tr> <tr> <td>103</td> <td id="table1">清水</td> <td class="table1" >93</td> </tr> <tr> <td>104</td> <td id="table1">須藤</td> <td class="table1" >77</td> </tr> <tr> <td>105</td> <td id="table1">石井</td> <td class="table1" >100</td> </tr> <tr> <td>106</td> <td id="table1">森本</td> <td class="table1" >5</td> </tr> </tbody> </table> 平均点 =<p id="ave"></p> <br> 最高得点者　=<div id="max"></div> <br> 最低得点者　＝<p id="min"></p> <br>

JavaScriptで上記のtableから要素を取得し平均点を求めることはできたのですが最高得点者、最低得点者を動的に求めることができません。
新たにtableに要素が追加されたときに対応できるようにしたいです。
HTMLにclassやIDの何を追加しても大丈夫です。
よろしくお願い致します。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

function getData(){
var d=[];
$('table tr').each(function(i, e){
var dd=[];
if (i===0)
$(this).find('th').each(function(j, el){dd.push($(this).text())});
else
$(this).find('.table1').each(function(j, el){dd.push($(this).text())});
d.push(dd);
});
return d;
}
表示結果　
63832093771005

 function getName(){
var b=[];
$('table tr').each(function(i, e){
var bb=[];
if (i===0)
$(this).find('#table1').each(function(j, el){bb.push($(this).text())});
else
$(this).find('#table1').each(function(j, el){bb.push($(this).text())});
b.push(bb);
});
return b;
}

表示結果　
田中佐藤鈴木清水須藤石井森本

var hash = {
  name: gg, ten: arr
};
var max = (hash.reduce((a,b)=>a.ten>b.ten?a:b).name);
$('#max').html(max);
var min = (hash.reduce((a,b)=>a.ten<b.ten?a:b).name);
$('#min').html(min);
ソースコード

試したこと

tableの内容をを配列にしたり最大値、最小値を求めるコードを書いたのですが表示されません。
最高得点者、最低得点者の名前のみ表示したいです。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

y_waiwai

2020/04/09 08:22

コードを提示しましょう

gentaro

2020/04/09 08:24

質問文を編集して自分で作ったJavaScriptのコードを提示し、問題があると思われる箇所がどこなのか書きましょう。 https://teratail.com/help/avoid-asking

takeshita0531

2020/04/09 08:50

該当のソースコードにコードを記載しました。

gentaro

2020/04/09 08:53

インデントつけないと誰も読みたがらないと思われる。 https://qiita.com/nchhujimiyama/items/dcfbfefaefd0d515ab51

takeshita0531

2020/04/09 09:24

おっけー

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

回答1件

ベストアンサー

こんにちは

いろいろなやり方があると思いますので、あくまで一例として参考になれば幸いです。

javascript
1$(function() {
2
3  
4  // データ行から、名前と点数を返すプラグインを作っておく
5  $.fn.getData = function() {
6    return {
7      name:  this.find('td:nth-of-type(2)').text(),
8      score: +this.find('td:nth-of-type(3)').text()      
9    };
10  }
11  
12  // 集計用オブジェクト
13  const result = {
14    highest: {
15      name: "",
16      score: 0
17    },
18    lowest: {
19      name: "",
20      score: Number.MAX_SAFE_INTEGER
21    },
22    count: 0,
23    total: 0
24  };
25  
26  // データ行を一行ずつ取得し、各行のデータから集計値を順次更新
27  $('tbody tr').each(function() {
28    const { name, score } = $(this).getData();
29    result.total += score;
30    result.count ++;
31    if (score > result.highest.score) {
32      result.highest = { name, score };
33    } else if (score < result.lowest.score) {
34      result.lowest = { name, score };
35    }
36  });  
37  
38  // 結果の表示
39  $('#average').text(result.total / result.count);
40  $('#highest_name').text(result.highest.name);
41  $('#lowest_name').text(result.lowest.name);
42
43  
44});
45