Question

我已经创建了一个动态html表，但我需要从表中获取值并计算每行的平均值？我使用javascript但不想使用jquery。这就是我到目前为止所拥有的。

https://jsfiddle.net/JamesGahan1/xwz62b1r/

＆＃13;

calcAverage = function() {
var tbl = document.getElementById('myTable');
for(var i= 0; i<tbl.rows.length; i++){


}
}


//  var tableRow = document.getElementById();
  //var tableCells = tableRow.getElementsByTagName("td");
//  var assignmentOne = tableCells[2].innerText;
 // var averageGrade = tableCells[2].innerText;



  //tableCells[3].innerHTML = averageGrade;
  //if (averageGrade < 40) {
  //  tableCells[3].style.backgroundColor = "red";
   // tableCells[3].style.color = "white";
  //}
//}//

AddRow = function() {
 
  
  var tbl = document.getElementById('myTable'); // table reference
        row = tbl.insertRow(tbl.rows.length);      // append table row
       var i;
    // insert table cells to the new row
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
       var createCell =row.insertCell(i).contentEditable = true;
    }
}
  
  
  
 



AddColumn = function() {

 
// var q = document.getElementById('myTable').rows.length;
 //for(i=0; i<q; i++)
 
 // var row = document.getElementById('myTable').rows[i +1];
   // var x = row.insertCell(3).contentEditable = true;
 //}
 
  var tbl = document.getElementById('myTable'); // table reference
      
    // open loop for each row and append cell
    for (var i = 0; i < tbl.rows.length; i++) {
        var createCell =tbl.rows[i].insertCell(tbl.rows.length).contentEditable = true ;
    }
}

＆＃13;

table,
th,
td {
  table-layout: fixed;
  border-style: groove;
  border-width: 3px;
  height:90px;
  width:90x;
  col-width:90px
}

th {
  
  text-align: center;
  height:90px;
  width:90px;
}
tr{
  width:90px;
  height:90px;
}

＆＃13;

<body>
  <div>


    <table id='myTable'>
      <tr>
        <th align="center" background="yellow">Student Name</th>
        <th align="center">Student ID</th>
        <th align="center">Assignment 1</th>
        <th align="center">Final Grade</th>
      </tr>

      <tr id= "1">
        <td align="left" contentEditable="true"></td>
        <td align="left" contentEditable="true"></td>
        <td align="right" contentEditable="true"></td>
        <td align="right" contentEditable="true"></td>
      </tr>
    </table>
    </div>
    <button type='btn' onclick="AddRow()">
      Add Row

    </button>
    <button type='btn' onclick="AddColumn()">
      Add Column

    </button>
    <button type='btn' onclick="LoadData()">
      Load data

    </button>
    <button type='btn' onclick="SaveData()">
      Save data

    </button>
  
  <button type='btn' onclick="calcAverage()">
    Calculate Average
  </button>
</body>

＆＃13;

Answer 1

基本上你只需要获得每一行的第四列（不包括第一列），然后只需获取它们的值，将它们加在一起然后将它们分开并将它们放在一起。

我这里不做任何检查，但您可能应该（如果需要）。

使用Javascript：

calcAverage = function() {
    var tbl = document.getElementById('myTable');
  var count = 0;
  var total = 0;
    for(var i= 1; i<tbl.rows.length; i++){
        var num = Number(tbl.rows[i].cells[3].innerHTML);
        total += num;
    count++;
    }
  console.log(total/count);
  document.getElementById("average").innerHTML = total/count;
}

更新小提琴：https://jsfiddle.net/xwz62b1r/1/

计算平均值？在动态html表上

1 个答案: