使用jQuery為每個輸入添加keyup

Question

由於我的代碼具有多個輸入字段，因此我對將關鍵字放置在何處感到困惑。考慮到我對javascript的了解有限，我只知道將關鍵字放入單個輸入中，因此任何輸入都應自動更新平均列。自動計算總平均值。希望有人能在這里幫助我。謝謝！

樣品表

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>

Answer 1

您走在正確的軌道上。 在每個輸入上放置一個向上偵聽器，但讓它運行相同的功能來更新平均列。 提示：當前函數應該是發生任何更改（重新計算）時要運行的函數。

如果需要的話，請檢查這個矮人，但一定要先嘗試一下！

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