在javascript中输入带有事件的文本字段，并在目标元素中自动填充值

Question

I have a problem in targetting the last th tag.In the fifth th, i put input type text.How to add event in this text field and the value of the last th(ave) should be updated automatically?Any help here is much appreciated.

<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>
        <th colspan="3">{!! $subject->subject !!}</th>
        <th colspan="2">{!! $subject->term_1 !!}</th>
        <th colspan="2">{!! $subject->term_2 !!}</th>
        <th colspan="2">{!! $subject->term_3 !!}</th>
        <th colspan="2"><input text="term_4" value="{!! $subject->term_4 !!}" 
              class="form-control" name="term_4"></th>

        <th colspan="2" name ="ave" id ="ave" value=""> total</th>


        </tr>
@endforeach


<script type="text/javascript">
$("tbody tr").each(function() {
    var total = 0;
    var ave = 0;
    var count = 1;
   $(this).children('th').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('th').last().html(ave);
});
</script>

Answer 1

First things first. I don't know if there is a reason why you chose th , but the ones inside tbody should better be td like :

<td colspan="3">{!! $subject->subject !!}</td>

and later you can change this line from this

$(this).children('th').not(':first').not(':last').each(function () {

to

$(this).children('td').not(':first').not(':last').each(function () {

And now the last part

  function calculateAve() { var aveValues = 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); aveValues = aveValues+ave; }); $('#totalAve').html(aveValues/2); } calculateAve(); $('#myTable').on('keyup', 'input', function(){ calculateAve(); }); 

 table#myTable th { background: #8BC34A; color: #fff; } table#myTable, table#myTable td, table#myTable th { border: solid #efefef; border-collapse: collapse; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th colspan="3">Subject</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> <tr> <td colspan="3">Math</td> <td colspan="2">81</td> <td colspan="2">87</td> <td colspan="2">81</td> <td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td> <td colspan="2" name ="ave" id ="ave" value=""> total</td> </tr> <tr> <td colspan="3">Science</td> <td colspan="2">89</td> <td colspan="2">83</td> <td colspan="2">81</td> <td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td> <td colspan="2" name ="ave" id ="ave" value=""> total</td> </tr> <tr> <td colspan="11">Total Average</td> <td id="totalAve" colspan="2"></td> </tr> </tbody> </table>