CODEWITHSUNDEEP
phpjquerycodeigniter
Dayz
Dayz

Reputation: 269

adding values of inputs in each row in corresponding textbox using jQuery

I have to add values of inputs in each row in corresponding textbox (under the heading total) using jquery. I used jQuery as below. class 'value' used for inputs to be typed and class 'values' used for the values displayed (1st two colums).

jQuery code is given below:

  jQuery(document).ready(function($) {
        var $total = $('#total_mark_<?php echo $student['student_code'];?>'),
            $value = $('.value');
            $values = $('.values');
        $value.on('input', function(e) {
            var total = 0;
            var t=0;
            $value.each(function(index, elem) {
                if(!Number.isNaN(parseFloat(this.value, 10)))
                    total = total + parseFloat(this.value, 10);

            });

            $values.each(function(index, elem) {

                    t = t + parseFloat(this.value, 10);

            });

             total=total+t;
            $total.val(Math.round(total));
        });
    });

When I use this code, I am getting an output only in the last textbox(total-textbox in last row only), where all the values (all input fields)summed up and total is showing in a textbox only.

How to add values of inputs in each row in corresponding textbox using jQuery to show output in corresponding "total"textbox?

Upvotes: 0

Views: 212

Answers (1)

vijay
vijay

Reputation: 729

I created one demo here, from this demo you can check how to traverse throw DOM element and how to get values from it.

$( document ).ready(function() {
    // Traverse throw all rows
    $('.student_marks tbody tr').each(function(){
      // Get current row
      var student = $(this);
      var total_points = 0;
      $(student).find('.marks').each(function(){
        total_points+=parseInt($(this).val());
      })
      $(student).find('.total').html(total_points);
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <table class="table student_marks" >
    <thead>
      <tr>
        <th>Student Name</th>
        <th>Math</th>
        <th>History</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name">John</td>
        <td><input value="50" readonly class="marks"/></td>
        <td><input value="50" readonly class="marks"/></td>
        <td class="total"></td>
      </tr>
      <tr>
        <td class="name">Mac</td>
        <td><input value="60" readonly class="marks"/></td>
        <td><input value="50" readonly class="marks"/></td>
        <td class="total"></td>
      </tr>
      <tr>
        <td class="name">Sena</td>
        <td><input value="40" readonly class="marks"/></td>
        <td><input value="70" readonly class="marks"/></td>
        <td class="total"></td>
      </tr>
      <tr>
        <td class="name">Devy</td>
        <td><input value="80" readonly class="marks"/></td>
        <td><input value="90" readonly class="marks"/></td>
        <td class="total"></td>
      </tr>
     
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions