與javascript相同的文本字段輸入多次

Question

在這段代碼中，我只能輸入一個。如果列Term4的任何一行有任何更改，則Ave的值爲空白。如何使其動態？我需要幫助，因爲我所有的代碼都是一次一個地搜索，直到我想出了這個腳本。我被困在這裏好幾天了。任何幫助將是一個祝福。這是我第一次輸入...

樣品臺，輸出1：

Subject | Term1 | Term2 | Term3 | Term4 | Ave 
    Math  81  87  81  80 82.4 
Science  89  83  81  80 83.25 

如果我改變輸入term 4，該ave欄將顯示爲空白。

樣品臺輸出2：

Subject | Term1 | Term2 | Term3 | Term4 | Ave 
    Math  81  87  81  85  
Science  89  83  81  80 83.25 

HTML：

<tr>     
    <th colspan="3">Learning Areas</th> 
    <th colspan="2">Term 1</th> 
    <th colspan="2">Term 2</th> 
    <th colspan="2">Term 3</th> 
    <th colspan="2">Term 4</th> 
    <th>Ave</th> 
    </tr> 
</thead> 
<tbody> 
      @foreach($card['AllGrade'] as $subject) 
      {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
    <tr> 
     <td colspan="3">{!! $subject->subject !!}</td> 
     <td colspan="2">{!! $subject->term_1 !!}</td> 
     <td colspan="2">{!! $subject->term_2 !!}</td> 
     <td colspan="2">{!! $subject->term_3 !!}</td> 
     <td colspan="2">{!! Form::text('term_4[]',$subject->term_4,['class'=>'form-control','name'=>'term_4','id'=>'term_4','value'=>'']) !!}</td> 

    <td colspan="2" class="aver" name ="ave" id ="ave" value=""> total</td> 

     </tr> 
     @endforeach 


//javascript 
<script type="text/javascript"> 
$("tbody tr").each(function() { 
    var total = 0; 
    var ave = 0; 
    var count = 1; 


     $(this).children('td').not(':first').not(':last').each(function() { 
     //"this" is the current element in the loop 

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

     total += parseInt(number); 
     ave = total/count; 
     count++; 
}); 


    if('.form-control'){ 
     $(this).on('keyup', 'td:eq(4) input', function(){ 
      $('.form-control').on("input", function() { 
       var dInput = this.value; 
       total += parseInt(dInput); 

       ave = total/count-1; 

      }); 

      console.log(ave); 
      $(this).parent().next().html(ave); 

    }); 
    } 

     $(this).children('td').last().html(ave); 

Answer 1

爲了避免楠問題，我確信，改變的輸入被視爲0。然後重新計算平均，那麼它的工作。

  $("tbody tr").each(function() { 
      var total = 0; 
      var ave = 0; 
      var count = 1; 


       $(this).children('td').not(':first').not(':last').each(function() { 
       //"this" is the current element in the loop 

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

       total += parseInt(number); 
       ave = total/count; 
       count++; 
       }); 


       $(this).children('td').last().html(ave); 


       if('.form-control'){ 
       $(this).on('keyup', 'td:eq(4) input', function(){ 
        $('.form-control').on("input", function() { 
         var dInput = parseInt(this.value); 
         if(!dInput || dInput === NaN) { 
          dInput = 0; 
         } 

        var total = 0; 

        var count = 1; 
        $(this).parent().siblings().not(':first').not(':last').each(function() { 

        //"this" is the current element in the loop 
        var number = $(this).html(); 
        total += parseInt(number); 
        count++; 

        }); 

        total += dInput; 
        console.log(total); 
        console.log(count); 
        var ave = total/count; 

        //console.log(ave); 
        $(this).parent().siblings(":last").html(ave); 

        calcTotalave(); 
        }); 

      }); 
      } 

    }); 
    calcTotalave(); 
    // calculate total average 
    function calcTotalave() { 
     var totalAve = 0; 
     $(".aver").each(function() { 
      console.log($(this).html()); 
      var thisAve = parseFloat($(this).html()); 
      if(!thisAve || thisAve === NaN) { 
       thisAve = 0; 
      }     

      totalAve += thisAve; 

     }); 
     console.log(totalAve); 
     $("#total-ave").val(totalAve); 
    }