CODEWITHSUNDEEP
javascriptjqueryhtml
juanpscotto
juanpscotto

Reputation: 1050

Get the sum of all the previous td elements and save it in the last td element - jQuery

I have a problem traversing the DOM, I want to get the sum of all the tr.item td.code td.input elements and save it in the last td.total_quantity element next to the td.code_subtotal element. I can find them by the input.code element inside each row.

Here is the HTML:

<tr class="item">
    <td class="code" rowspan="1">
        <input type="hidden" value="1775" class="id">
        <input type="hidden" value="31031005" class="code">31031005
    </td>
    <td class="total_quantity">
        <input type="hidden" value="0.109375" class="total_quantity"><span class="replaceme">0,109</span> <!-- GET THIS VALUE -->
    </td>
</tr>
<tr class="item">
    <td class="code">
        <input type="hidden" value="1775" class="id">
        <input type="hidden" value="31031005" class="code">31031005
    </td>
    <td class="total_quantity">
        <input type="hidden" value="0.4176136363636363" class="total_quantity"><span class="replaceme">0,418</span> <!-- GET THIS VALUE -->
    </td>
</tr>
<tr class="item">
    <td class="code_subtotal">
        <input type="hidden" value="1775" class="id">
        <input type="hidden" value="31031005" class="code">31031005
    </td>
    <td class="total_quantity"><span class="replaceme">0,136</span>
        <input type="hidden" value="HERE THE VALUE OF (input.total_quantity + input.total_quantity)" class="total_quantity"> <!-- SUM HERE THE PREVIOUS VALUES -->
    </td>
</tr>

I have tried this approach but it does not work:

      var total = 0;
      $('table#tabla_materia tr.item td.code input.code[value="31031005").each(function(index, el) {
          console.log(el.value);
          console.log('Here I'm'); // dont enter here
          total += el.parent().parent().find('td.total_quantity input.total_quantity').val();
          console.log('total : '+total );
        });

Also tried this approach but does not work either:

var total = 0;
$('table#tabla_materia tr.item td.code input.code[value="31031005"]).parent().parent().find('td.total_quantity input.total_quantity').each(function(index, el) {
      console.log('Here I'm'); // dont enter here
      total += el.value;
      // console.log('total : '+total );
    });

What I'm doing wrong?

Upvotes: 0

Views: 355

Answers (2)

Mogsdad
Mogsdad

Reputation: 45740

If you have any way to control the HTML you're parsing, change it. The current design is horrible.

Because of the indirect relationship between elements within the table rows, you need to do multiple jQuery operations to move down and up and down the HTML.

This snippet sums all the quantity values, updates the displayed table and sets the input value you've indicated:

// This is the product code (?) we're interested in
var codeval = '31031005';

// Get the quantity from each matching 'code' row in table
var inputs = $('table').find('td.code').find('input.code[value="'+codeval+'"]').parents('tr').find('span.replaceme');

// Sum the quantity values from matched rows
var quantity = 0;
for (var i=0; i<inputs.length; i++) {
  console.log( $(inputs[i]).html() )
  // parse text e.g. 0,123 as integer
  quantity += parseInt( $(inputs[i]).html().replace(',','') );
}
console.log( quantity );

// Store total quantity in 'total_quantity' row
$('table').find('td.code_subtotal').find('input.code[value="'+codeval+'"]').parents('tr').find('input.total_quantity').val(quantity);
$('table').find('td.code_subtotal').find('input.code[value="'+codeval+'"]').parents('tr').find('span.replaceme').html(quantity);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr class="item">
    <td class="code" rowspan="1">
        <input type="hidden" value="1775" class="id">
        <input type="hidden" value="31031005" class="code">31031005
    </td>
    <td class="total_quantity">
        <input type="hidden" value="0.109375" class="total_quantity"><span class="replaceme">0,109</span> <!-- GET THIS VALUE -->
    </td>
</tr>
<tr class="item">
    <td class="code">
        <input type="hidden" value="1775" class="id">
        <input type="hidden" value="31031005" class="code">31031005
    </td>
    <td class="total_quantity">
        <input type="hidden" value="0.4176136363636363" class="total_quantity"><span class="replaceme">0,418</span> <!-- GET THIS VALUE -->
    </td>
</tr>
<tr class="item">
    <td class="code_subtotal">
        <input type="hidden" value="1775" class="id">
        <input type="hidden" value="31031005" class="code">31031005
    </td>
    <td class="total_quantity"><span class="replaceme">0,136</span>
        <input type="hidden" value="HERE THE VALUE OF (input.total_quantity + input.total_quantity)" class="total_quantity"> <!-- SUM HERE THE PREVIOUS VALUES -->
    </td>
</tr>
  </table>

Upvotes: 1

Mozgor
Mozgor

Reputation: 204

Rob Scott said everything, you're adding html tag 'value' which are not mathematical value.

By the way, i don't know how many td do you have, but if your table is big / would be one day, you better use a classic for loop rather than .each

(source: http://www.sitepoint.com/speed-question-jquery-each-vs-loop/ )

edit (after your comment) : does your console.log display the value you want to add ? If it is, it means you do have access to them by your el.value. So you just have to replace total += el.value by total += parseInt(el.value)

Upvotes: 0

Related Questions