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

來源

2017-04-27 Chiloy

你的意思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>

來源

2017-04-27 02:51:07

好吧，先生，我會先試一試。 – Chiloy

太棒了！我的例子只有2個輸入，但你絕對可以將它擴展到多個輸入！ –

任何第一個輸入，總和的值是NaN或甚至所有字段都有值，平均值總是NaN。爲什麼？ – Chiloy

使用jQuery添加每個輸入的關鍵字

回答

相關問題