使用javascript計算表中的平均值

Question

所以我想要的是獲得特定列的平均值。 我想獲得 PO1 到 PO9 列的平均值。 我想使用 javascript。 所以請大家幫幫我。 謝謝

這是我的 html 表：

<table id="view_classlist" class="table table-striped table-bordered dataTable no-footer">
<thead>
    <tr>
        <th><center>Student ID </i></center></th>
        <th><center>Name </i></center></th>
        <th><center>PO 1</center></th>
        <th><center>PO 2</center></th>
        <th><center>PO 3</center></th>
        <th><center>PO 4</center></th>
        <th><center>PO 5</center></th> 
        <th><center>PO 6</center></th> 
        <th><center>PO 7</center></th> 
        <th><center>PO 8</center></th> 
        <th><center>PO 9</center></th> 
    </tr>
</thead>

<tbody>
    <tr>          
        <td><center>111</center></td>
        <td><center>John</center></td>
        <td><center>1.1</center></td>
        <td><center>2.0</center></td>
        <td><center>3.0</center></td>
        <td><center>2.7</center></td>
        <td><center>1.9</center></td>
        <td><center>1.2</center></td>
        <td><center>1.1</center></td>
        <td><center>1.3</center></td>
        <td><center>1.2</center></td>
    </tr>
    <tr>          
        <td><center>112</center></td>
        <td><center>Mae</center></td>
        <td><center>1.2</center></td>
        <td><center>2.0</center></td>
        <td><center>1.2</center></td>
        <td><center>1.2</center></td>
        <td><center>1.3</center></td>
        <td><center>1.5</center></td>
        <td><center>1.4</center></td>
        <td><center>1.2</center></td>
        <td><center>3.0</center></td>
    </tr>
    <tr>          
        <td><center>113</center></td>
        <td><center>Jerry</center></td>
        <td><center>1.1</center></td>
        <td><center>1.2</center></td>
        <td><center>3.0</center></td>
        <td><center>2.7</center></td>
        <td><center>1.2</center></td>
        <td><center>1.6</center></td>
        <td><center>1.2</center></td>
        <td><center>2.3</center></td>
        <td><center>1.2</center></td>
    </tr>

    <tfoot>
        <td colspan="2"><center>Average</center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
        <td><center></center></td>
    </tfoot>
</tbody>

Answer 1

這是一種方法：

var table = document.getElementById('view_classlist'),
  rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'),
  footer = table.getElementsByTagName('tfoot')[0];

// for each column that must be treated
for(var i=2; i<11; i++){
  var sum = numOfValues = 0;
  // add each row's value
  for(numOfValues=0, l=rows.length; numOfValues<l; numOfValues++){
    sum += parseFloat(
        rows[numOfValues].getElementsByTagName('td')[i]
          .getElementsByTagName('center')[0]
          .innerHTML
      );
  }

  // calculate the average
  var avg = sum / numOfValues;
  // insert it in the corresponding TD (rounded to 2 decimals)
  footer.getElementsByTagName('td')[i-1].innerHTML = Math.round(avg * 100) / 100;
}

JS小提琴演示

Answer 2

我有一個名為html5csv.js的庫，除其他外，它可以抓取表格並在瀏覽器端 JS 中添加計算。

首先，讓我們稍微清理一下表格以消除單元格中像<center>這樣的非數字數據：

<table id="view_classlist" class="table table-striped table-bordered dataTable no-footer">
<thead>
    <tr>
        <th>Student ID </i></th>
        <th>Name </i></th>
        <th>PO 1</th>
        <th>PO 2</th>
        <th>PO 3</th>
        <th>PO 4</th>
        <th>PO 5</th> 
        <th>PO 6</th> 
        <th>PO 7</th> 
        <th>PO 8</th> 
        <th>PO 9</th> 
    </tr>
</thead>

<tbody>
    <tr>          
        <td>111</td>
        <td>John</td>
        <td>1.1</td>
        <td>2.0</td>
        <td>3.0</td>
        <td>2.7</td>
        <td>1.9</td>
        <td>1.2</td>
        <td>1.1</td>
        <td>1.3</td>
        <td>1.2</td>
    </tr>
    <tr>          
        <td>112</td>
        <td>Mae</td>
        <td>1.2</td>
        <td>2.0</td>
        <td>1.2</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.5</td>
        <td>1.4</td>
        <td>1.2</td>
        <td>3.0</td>
    </tr>
    <tr>          
        <td>113</td>
        <td>Jerry</td>
        <td>1.1</td>
        <td>1.2</td>
        <td>3.0</td>
        <td>2.7</td>
        <td>1.2</td>
        <td>1.6</td>
        <td>1.2</td>
        <td>2.3</td>
        <td>1.2</td>
    </tr>
</tbody>

然后按任務平均，我們將添加這個加載了 jQuery 和 html5csv.js 的 JS：

CSV.begin('#view_classlist')
   .call(function(next){
       var rows = this.data.rows; 
       var lCol=rows[0].length;
       var firstRow = 1;
       var lRow = this.data.rows.length;
       var colAvg = ['Average',''];
       for(var col=2; col<lCol; col++){
           colAvg[col] = 0.0;
           for(var row=1; row<lRow; row++)
               colAvg[col] += rows[row][col]/(lRow-1);
       }
       this.data.rows.push(colAvg);
     })
    .table("tableWithAvg")
    .go();

這從從原始表中抓取數據開始，調用用戶定義的函數將列平均值添加到表中，然后輸出一個 ID 為“tableWithAvg”的新表

JSFIDDLE

為了按學生求平均值，我們想要添加一列，並且在html5csv.js Wiki 中有一個名為appendCol的 CSV 助手。

以下與 html5CSV.js 庫一起使用以按學生求平均值：

CSV.begin('#view_classlist')
   .appendCol("Avg", function(index, row){
       var sum = 0.0;
       for(var k in row){
           if (k.indexOf('PO')>=0) sum+=row[k];
       }
       return sum/9;
    }, true)
    .table("tableWithAvg")
    .go();

學生JSFIDDLE 的平均值

Answer 3

您還可以使用 jquery 獲取 DOM 元素值，然后將其相加。

<html>
  <script>
    var total = 0;
    $('.data').each(function(){
      total += parseFloat((this).val());
    });
    console.log(total);
  </script>
  <body>
    <div class="data"><td>1</td></div>
    <div class="data"><td>2</td></div>
  </body>
</html>