使用javascript从html TD标记中的输入字段获取值

Question

I have this current script in calculating the columns average but I can't get the value from input. The code only accesses what's in the td .

Can anyone tell me why the result is NaN ?

I had tried putting the value in td and it's ok but I need the value inside the input type. How do I access the value in the input?

This table is an update form that is why it is an input field.

Also how do I add a keyup event in all the input fields?

Sample output

Subject | Term1 | Term2 | Term3 | Term4  
   Math      81      87      81      80    
Science      89      83      81      80
Average |    85 |    85 |    81 |    80

HTML

<div class="table table-responsive table-bordered">
  <table class="table">
    <thead>


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


    </thead>
    <tbody>
      @foreach($update_card['AllGrade'] as $subject) {!! Form::hidden('grade_id[]',$subject['grade_id']) !!}
      <tr>
        <td colspan="3">{!! $subject->subject !!}</td>
        <td colspan="2"><input type="text" name="term_1[]" value="{!! $subject->term_1 !!}" class="form-control number-only"></td>
        <td colspan="2"><input type="text" name="term_2[]" value="{!! $subject->term_2 !!}" class="form-control number-only"></td>
        <td colspan="2"><input type="text" name="term_3[]" value="{!! $subject->term_3 !!}" class="form-control number-only"></td>
        <td colspan="2"><input type="text" name="term_4[]" value="{!! $subject->term_4 !!}" class="form-control number-only"></td>

      </tr>

      @endforeach
      <tr id="average">
        <td colspan="2">Average</td>
        <td colspan="2">0</td>
        <td colspan="2">0</td>
        <td colspan="2">0</td>
        <td colspan="2">0</td>
      </tr>
    </tbody>

  </table>

Script

$(document).ready(function(){

 $("#average td").each(function(k,v){
   debugger;
      if(k>0){
      $sum=0;
      $row = $(this).closest("table").find("tr");    
      $($row).each(function(key,val){
        if(key>0 && key<$row.length-1){
          $sum+=parseInt($($(this).find("td")[k]).text());      
        }
      })

      $(this).text($sum/($row.length-2));
      }

 })

});

Answer 1

A simplified version of your average computation:

 $('.table :input').on('input', function(e) { var cellIdx = $(this).closest('td').index() + 1; var currAvgCell = $("#average td:nth-child(" + cellIdx + ")").get(0); var cellsInput = $(this).closest("table tbody").find("tr:not(:last) td:nth-child(" + cellIdx + ") :input"); // reset value currAvgCell.textContent = '0'; cellsInput.each(function (key, r) { currAvgCell.textContent = +r.value + +currAvgCell.textContent; }); currAvgCell.textContent = +currAvgCell.textContent / +cellsInput.length; }); // comput at dom ready each average $('.table tbody tr:first :input').trigger('input'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="table table-responsive table-bordered"> <table class="table"> <thead> <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> </thead> <tbody> <tr> <td colspan="3">Math</td> <td colspan="2"><input type="text" name="term_1[]" value="81" class="form-control number-only"></td> <td colspan="2"><input type="text" name="term_2[]" value="87" class="form-control number-only"></td> <td colspan="2"><input type="text" name="term_3[]" value="81" class="form-control number-only"></td> <td colspan="2"><input type="text" name="term_4[]" value="80" class="form-control number-only"></td> </tr> <tr> <td colspan="3">Science</td> <td colspan="2"><input type="text" name="term_1[]" value="89" class="form-control number-only"></td> <td colspan="2"><input type="text" name="term_2[]" value="83" class="form-control number-only"></td> <td colspan="2"><input type="text" name="term_3[]" value="81" class="form-control number-only"></td> <td colspan="2"><input type="text" name="term_4[]" value="80" class="form-control number-only"></td> </tr> <tr id="average"> <td colspan="3">Average</td> <td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td> </tr> </tbody> </table> </div> 

Answer 2

In your code, $($(this).find("td")[k]).text() gets text value of the table cell. In order to get value of the input inside, you'd need to write $(this).find("td").eq(k).find('input').val() .

Also, you can add global events to elements, like so:

$('table').on('keyup', 'td input', callback)

It's gonna call the event on every input inside table td , even if it was created dynamically.