Getting the value from input field within html TD tag using javascript

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));
      }

 })

});

You use text() for cells, and val() otherwise. For key listener, use $(yourInput).click(select_element); — orabis
– orabis, Commented May 18, 2017 at 13:27
@freedomn- Where to put this line sir,somewhere here? $sum+=parseInt($($(this).find("td")[k]).text()); — Chiloy
– Chiloy, Commented May 18, 2017 at 13:28
@orabis - Sir done replacing the .text() here --- $sum+=parseInt($($(this).find("td")[k]).val()); .But still nothing. — Chiloy
– Chiloy, Commented May 18, 2017 at 13:31

gaetanoM · Accepted Answer · 2017-05-18 14:14:51Z

3

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>

edited May 18, 2017 at 14:14

answered May 18, 2017 at 13:57

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chiloy Over a year ago

Its nice sir.Is it possible to add here a key event in every input fields?How would you do that to your code if possible?

Chiloy Over a year ago

Below your answer as Mr Wiktor said ..to put this $('table').on('keyup', 'td input', callback) as global but it didn't work. I'd putting it 3 times in different place but still no luck.

gaetanoM Over a year ago

@Chiloy Now whenever you change an input value the corresponding average is recomputed. See the updated snippet and let me know. Thanks

Chiloy Over a year ago

Your update is perfect as what I was wanted.Your help is so much appreciated.Hoping i could help here too as I have learned day by day.Thank you sir!

Wiktor Bednarz · Accepted Answer · 2017-05-18 13:29:49Z

1

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.

answered May 18, 2017 at 13:29

Wiktor Bednarz

1,55311 silver badges15 bronze badges

3 Comments

Chiloy Over a year ago

This is right Sir..Thank you for the contribution.It means a lot to me.About the callback, i will try it tomorrow.

Chiloy Over a year ago

Where exactly should i put the event?The results of the average would become all zeroes if i insert this somewhere on top.$('table').on('keyup', 'td input', callback);

Wiktor Bednarz Over a year ago

@Chiloy, check out this example.

Collectives™ on Stack Overflow

Getting the value from input field within html TD tag using javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related