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 Fiddle Demo

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>

然后按任务平均，我们将添加这个JS与jQuery和html5csv.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为＆＃34; tableWithAvg＆＃34;

的新表

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>

使用javascript计算表中的平均值

3 个答案:

JS Fiddle Demo