使用keyup事件计算javascript中的总平均值

时间:2017-04-29 00:59:29

标签: javascript jquery

我的应用程序缺少使用laravel来计算总平均值的功能。由于它需要javascript,我遇到了麻烦,现在将表foreach简化为静态值,但由于我有 average 的脚本,现在我需要一个的函数总平均值

希望所有人都可以帮助我完成我的工作。提前谢谢。

$("input").on("keyup", function() {

  $("tbody tr").each(function() {
    var col = 1;
    var tr = 1;
    var t = 0;
    var a = 0;

    $(this).children('td').not(':first').not(':last').each(function() {

      var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();

      t += parseInt(number);
      a = t / col;
      col++;

    });
    $(this).children('td').last().html(a);

    col = 1;
    tr++;


  });
  //getTotalave();

});
<html>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table>
    <thead>
      <tr>
        <th>Grade</th>
        <th>score 1</th>
        <th>score 2</th>
        <th>score 3</th>
        <th>score 4</th>
        <th>average</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>student1</td>
        <td><input type="text" id="s1" value="85"></td>
        <td><input type="text" id="s2" value="86"></td>
        <td><input type="text" id="s3" value="84"></td>
        <td><input type="text" id="s4" value="81"></td>
        <td class="ave" value="0">84</td>
      </tr>
      <tr>
        <td>student2</td>
        <td><input type="text" id="s1" value="88"></td>
        <td><input type="text" id="s2" value="80"></td>
        <td><input type="text" id="s3" value="84"></td>
        <td><input type="text" id="s4" value="85"></td>
        <td class="ave" value="0">84.25</td>
      </tr>
      <tr>
        <td>student3</td>
        <td><input type="text" id="s1" value="86"></td>
        <td><input type="text" id="s2" value="86"></td>
        <td><input type="text" id="s3" value="87"></td>
        <td><input type="text" id="s4" value="90"></td>
        <td class="ave" value="0">87.25</td>
      </tr>
      <tr>
        <td>student4</td>
        <td><input type="text" id="s1" value="85"></td>
        <td><input type="text" id="s2" value="80"></td>
        <td><input type="text" id="s3" value="89"></td>
        <td><input type="text" id="s4" value="90"></td>
        <td class="ave" value="0">86</td>
      </tr>
      <tr>
        <th>Total Average</th>
        <td class="tave" value="">85.375</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

使用唯一的类名称:

&#13;
&#13;
$("input").on("keyup", function() {
  var tAv = 0,
    tRo = 0;
  $("tbody tr").not(':last').each(function() {
    var col = 0,
      t = 0; // starting counters
    tRo++;
    $(this).children('td').not(':first').not(':last').each(function() {

      t += parseFloat($('input', this).val()) || 0;
      col++;

    });
    var rAv = t / col; // row average
    tAv += rAv; // increment average
    $('td', this).last().text(rAv.toFixed(2)); // row average display
  });
  $('.tave').text((tAv / tRo).toFixed(2)); // final average
});
&#13;
<html>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table>
    <thead>
      <tr>
        <th>Grade</th>
        <th>score 1</th>
        <th>score 2</th>
        <th>score 3</th>
        <th>score 4</th>
        <th>average</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>student1</td>
        <td><input type="text" id="s1" value="85"></td>
        <td><input type="text" id="s2" value="86"></td>
        <td><input type="text" id="s3" value="84"></td>
        <td><input type="text" id="s4" value="81"></td>
        <td class="ave" value="0">84</td>
      </tr>
      <tr>
        <td>student2</td>
        <td><input type="text" id="s1" value="88"></td>
        <td><input type="text" id="s2" value="80"></td>
        <td><input type="text" id="s3" value="84"></td>
        <td><input type="text" id="s4" value="85"></td>
        <td class="ave" value="0">84.25</td>
      </tr>
      <tr>
        <td>student3</td>
        <td><input type="text" id="s1" value="86"></td>
        <td><input type="text" id="s2" value="86"></td>
        <td><input type="text" id="s3" value="87"></td>
        <td><input type="text" id="s4" value="90"></td>
        <td class="ave" value="0">87.25</td>
      </tr>
      <tr>
        <td>student4</td>
        <td><input type="text" id="s1" value="85"></td>
        <td><input type="text" id="s2" value="80"></td>
        <td><input type="text" id="s3" value="89"></td>
        <td><input type="text" id="s4" value="90"></td>
        <td class="ave" value="0">86</td>
      </tr>
      <tr>
        <th>Total Average</th>
        <td class="tave" value="">85.375</td>
      </tr>
    </tbody>
  </table>
</body>

</html>
&#13;
&#13;
&#13;