使用 JavaScript 计算表中的平均值

calculate average in a table using javascript

本文关键字：平均值 JavaScript 计算 使用      更新时间：2023-09-26

所以我想要的是获取特定列的平均值。我想获得 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>

这里有一种方法可以做到这一点：

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小提琴演示

我有一个名为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"的新表

吉斯菲德尔

为了按学生平均，我们需要添加一个列，并且在 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 划分的平均值

你也可以使用 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>
相关文章：