使用jQuery添加每个输入的关键字

问题描述：

由于我的代码有多个输入字段，因此我很困惑，因为我的代码有多个输入字段。我知道的仅仅是在单个输入中考虑到我在javascript中的有限知识。所有这些输入都应该自动更新平均列。最后它应该自动计算Total average.Hope任何人都可以帮助我在这里。谢谢！使用jQuery添加每个输入的关键字

样品表

Subject | 1stG | secG | 3rdG |4thG | Average 
    English  0  0  0  0  0 inputs here except for Average 
    Psychology 0  0  0  0  0

总平均这里值...

HTML

<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 
    @foreach($update_card['AllGrade'] as $subject) 
     {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
     <tr> 
     <th colspan="3">{!! $subject->subject !!}</th> 
     <td colspan="2">{!! Form::text('term_1[]',$subject->term_1,['class'=>'form-control','name[]'=>'term_1','id[]'=>'term_1','value'=>'']) !!}</td> 
     <td colspan="2">{!! Form::text('term_2[]',$subject->term_2,['class'=>'form-control','name[]'=>'term_2','id[]'=>'term_2','value'=>'']) !!}</td> 
     <td colspan="2">{!! Form::text('term_3[]',$subject->term_3,['class'=>'form-control','name[]'=>'term_3','id[]'=>'term_4','value'=>'']) !!}</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="average" value=""> Average</td> 
    </tr 
    @endforeach 
     <tr> 
     <th colspan="11">Total Average:</th> 
     <th>{!! Form::text('scholar_GPA',$update_card->scholar_GPA,['class'=>'form-control total-ave','name' => 'total-ave','id' => 'total-ave','value' => '']) !!}</th> 
     </tr>

脚本

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


       $(this).children('td').not(':last').each(function() {//foreach of the column of the row 
       //"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; 
        alert(number+' '+total); 
         alert('td'+count); 
       count++; 

       }); 
        alert('last'+ave); 
        $(this).children('td').last().html(ave);//loop the row 

    }); 
</script>

你的意思keyup事件？ – fangxing

是的先生。如果我输入任何输入文件的值，平均柱应该更新。 – Chiloy

答

您正处于正确的轨道上。在每个输入上放置一个关键的监听器，但它会运行相同的功能来更新您的平均列。提示：当前函数应该是在有任何更改（重新计算）时运行的函数。

如果需要，请检查一下这个运动员，但一定要先尝试自己！

https://plnkr.co/edit/0fJgNDty9OiW5KeBJbn8

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
</script> 
<script src="script.js"></script> 
<input type="text" value="0"> 
<input type="text" name="" id="" value="0" /> 
<p id="average">0</p> 
<script> 
function calculateAverage(){ 
    sum = 0 
    $("input").each(function(){ 
     sum += parseInt($(this).val()) 
    }) 
    $("#average").text(sum) 
} 
$("input").on("keyup", function(){ 
    calculateAverage() 
}) 
</script> 
</html>

好吧，先生，我会先试一试。 – Chiloy

太棒了！我的例子只有2个输入，但你绝对可以将它扩展到多个输入！ –

任何第一个输入，总和的值是NaN或甚至所有字段都有值，平均值总是NaN。为什么？ – Chiloy

使用jQuery添加每个输入的关键字

相关推荐