使用jQuery为每个输入添加keyup

Question

I am confused on where to put the keyup since my code has multiple input fields.What i know is only putting a keyup in a single input considering my limited knowledge in javascript.Any of this input should automatically update the average column.Lastly it should auto calculate Total average.Hope anyone could help me here.Thank you! 由于我的代码具有多个输入字段，因此我对将关键字放置在何处感到困惑。考虑到我对javascript的了解有限，我只知道将关键字放入单个输入中，因此任何输入都应自动更新平均列。自动计算总平均值。希望有人能在这里帮助我。谢谢！

Sample Table 样品表

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

Total Average value here... 总平均值在这里...

HTML 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 脚本

<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>

Answer 1

You are on the right track. 您走在正确的轨道上。 Put a key up listener on each input but have it run the same function to update your average column. 在每个输入上放置一个向上侦听器，但让它运行相同的功能来更新平均列。 Hint: Your current function should be the function to run when there is any changes(recalculate). 提示：当前函数应该是发生任何更改（重新计算）时要运行的函数。

If needed, check out this plunker but be sure to try yourself first! 如果需要的话，请检查这个矮人，但一定要先尝试一下！

https://plnkr.co/edit/0fJgNDty9OiW5KeBJbn8 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>

使用jQuery为每个输入添加keyup

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-27 02:51:07

使用jQuery为每个输入添加keyup

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-27 02:51:07

解决方案1
0 已采纳 2017-04-27 02:51:07