javascript - 解析 JavaScript 中的输入

Question

我有一个学校卡表格。目的是显示每个评分周期的平均值。数据来自数据库，而平均结果来自 javascript。当用户在任何输入字段中输入时，该列的平均值应该动态更改或更新它。现在在我当前的代码中，它会生成错误 e.text() 不是函数。基本上 sum 变量没有从 parseInt 捕获值。任何人都有解决问题的想法这个问题？

*****示例结果*****

    Subject | Col1 |Col2 |Col3 |Col4
    1          80    80   86    80       (80+80+86+80)/4  Note: not this way
    2          86    85   86    81
    3          80    87   85    86

  Result       82    84  and so on..
    It should be:
    (80+86+80)/3 number of rows

view.blade.php

<tr>
   <th colspan="3">Subjects</th>
     <th colspan="2">First Grading</th>
     <th colspan="2">Second Grading</th>
     <th colspan="2">Third Grading</th>
     <th colspan="2">Fourth Grading</th>

 </tr>
</thead>   
<tbody>
      @foreach($update_card['AllGrade'] as $subject)
       {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
<tr>
<td colspan="3">{!! $subject->subject !!}</td> 
<td colspan="2"><input type="text" name="term_1[]" value="{!! $subject->term_1 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_2[]" value="{!! $subject->term_2 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_3[]" value="{!! $subject->term_3 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_4[]" value="{!! $subject->term_4 !!}" class="form-control number-only"></td>
 <td class="ave" value="0"></td>
</tr>
         @endforeach

<tr id="average">
 <td colspan="3">Average</td><td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td>
</tr>
</tbody>

这里使用 JavaScript

$("input").on("keyup", function() {
         $("tbody tr").each(function(index) {
              var sum = 0; // The summation of all terms.
              var card = 0; // Number of cells.
              $(this).children('td').not(':first').each(function(i, e) {
                  card++;
                  sum+= parseInt(e.text().trim()); //this is the error
              });
              var avg = sum/card;
              console.log(avg);
              $("#average td:nth-of-type("+index+")").html(avg);
        });
});

Answer 1

as I pointed you loop through tds and get text() while it has no text on it .. it has an input so you need to get the input value not the td text

所以你可以尝试这样的事情

我创建了一个函数，用于 row_sum() 对行求和，column_sum() 对列求和，column_Average() 得到按行数计算列平均值，并通过 row_Average() 计算 td 数字的行平均值。

$(document).ready(function(){
  $("input").on("keyup", function() {
     //row_sum();      // for sum row
     //column_sum();   // for sum column
     column_Average(); // for column average
     row_Average();    // for row average
  }).keyup();  // by adding .keyup() your code will run onload
});



function column_sum(){
  var sum = []; // The summation of all terms.
  $("tbody tr:not(#average)").each(function(index) {
    var thisIt = $(this);
      thisIt.find('td:not(.ave)').not(':first').each(function(i) {
        var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0;
        sum[i] ? sum[i] += parseInt(input_val) : sum.push(parseInt(input_val));
    });  
  });
  $('#average td:not(:first)').each(function(i){
    $(this).text(sum[i]);
  });
}
function row_sum(){
  $("tbody tr:not(#average)").each(function(index) {
    var thisIt = $(this);
    var sum = 0; // The summation of all terms.
    thisIt.find('td').not(':first').not(':last').each(function(i) {
          var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0;
          sum += parseInt(input_val); 
    });
  thisIt.find('td.ave').text(sum);
  });
}

function column_Average(){
  var sum = []; // The summation of all terms.
  var tr_num = $("tbody tr:not(#average)").length;
  $("tbody tr:not(#average)").each(function(index) {
    var thisIt = $(this);
      thisIt.find('td:not(.ave)').not(':first').each(function(i) {
        var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0;
        sum[i] ? sum[i] += parseInt(input_val) : sum.push(parseInt(input_val));
    });  
  });
  $('#average td:not(:first)').each(function(i){
    $(this).text(sum[i] / tr_num);
  });
}


function row_Average(){
  $("tbody tr:not(#average)").each(function(index) {
    var thisIt = $(this);
    var sum = 0; // The summation of all terms.
     var code = 0;  thisIt.find('td').not(':first').not(':last').each(function(i) {
          var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0;
          code++;
          sum += parseInt(input_val); 
    });
  thisIt.find('td.ave').text(sum / code);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>   
<tr>
   <th colspan="3">Subjects</th>
     <th colspan="2">First Grading</th>
     <th colspan="2">Second Grading</th>
     <th colspan="2">Third Grading</th>
     <th colspan="2">Fourth Grading</th>
     <th>Average</th>
 </tr>
</thead>   
<tbody>
<tr>
<td colspan="3">Subject</td> 
<td colspan="2"><input type="text" name="term_1[]" value="12" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_2[]" value="13" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_3[]" value="14" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_4[]" value="15" class="form-control number-only"></td>
 <td class="ave" value="0"></td>
</tr>

<tr>
<td colspan="3">Subject</td> 
<td colspan="2"><input type="text" name="term_1[]" value="120" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_2[]" value="130" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_3[]" value="140" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_4[]" value="150" class="form-control number-only"></td>
 <td class="ave" value="0"></td>
</tr>

<tr id="average">
 <td colspan="3">Average</td><td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td>
</tr>
</tbody>
</table>