jquery to loop through each table row and perform math with each row input field

Question

I have the below table

<table class="authors-list" border=0 id="ordertable">
    <tr>
        <td>Cubic Meters</td><td>Cubes per Bundle</td><td>Total Bundles</td>
    <tr>
       <td><input type="text" name="cubicmeters1" id="cubicmeters1" value="1.38"></td>
       <td><input type="text" name="cubesperbundle1" id="cubesperbundle1" value="1.485"></td>
       <td><input type="text" name="bundles1" id="bundles1"></td>
    </tr>
    <tr>
       <td><input type="text" name="cubicmeters2" id="cubicmeters2" value="1.38"></td>
       <td><input type="text" name="cubesperbundle2" id="cubesperbundle2" value="1.485"></td>
       <td><input type="text" name="bundles2" id="bundles2"></td>
    </tr>
    <tr>
       <td><input type="text" name="cubicmeters3" id="cubicmeters3" value="1.38"></td>
       <td><input type="text" name="cubesperbundle3" id="cubesperbundle3" value="1.485"></td>
       <td><input type="text" name="bundles3" id="bundles3"></td>
   </tr>
</table>

what I want to do is loop through each table row and perform a math function against two inputs, and populate the result into a third input.

Fiddle is here: http://jsfiddle.net/ttZtX/1/

So here is my attempt at the jquery:

$("table.authors-list").find('input[name^="cubicmeters1"]').each(function () {
    cubes += +$(this).closest('tr').find('input[name^="cubicmeters"]').val();
    cubesperbundle += +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
    +$(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
});

This simply produces no result or error and the input is not populated.

To summarize, my requirement is for jquery to loop through each row, multiply cubicmeters by cubesperbundle and populate bundles with the result.

simple enough but I just cant get it right.

Any help would be appreciated.

Thanks in advance...

Musa · Accepted Answer · 2013-04-24 22:27:37Z

3

You selected No wrap - in <head> in your fiddle so the elements that you are trying to select has not yet been created, try changing it to onDomready
Also remove the 1 in $("table.authors-list").find('input[name^="cubicmeters1"]') to select all the input instead of just one and add var before your variables so they don't leak into the global scope

$("table.authors-list").find('input[name^="cubicmeters"]').each(function () {
    var cubes = +$(this).closest('tr').find('input[name^="cubicmeters"]').val();
    var cubesperbundle = +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
    $(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
});

http://jsfiddle.net/ttZtX/19/

answered Apr 24, 2013 at 22:27

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

4 Comments

Smudger Over a year ago

Thanks Musa. can this work if in the body itself. trouble is the cubicmeters and cubesperbundle are populated by an earlier jquery function and this is run in the body so I need to trigger this script from the body, after the inputs have been populated. Thanks

Musa Over a year ago

@Smudger it doesn't matter where the code is, it matters when it is called. You need to call it after the dom has loaded(or just when the elements it operate on are loaded)

Smudger Over a year ago

Thanks. this is currently after all the other scripts in body. How do I achieve this? the other inputs are populated by this script:

for (var i = 1; i <= rows; i++) {     (function (index) {         $.post('get_sku_pieces', {             data: $('#product' + index).val()         }, function (result) {             $('#pcsperbundle' + index).val(result);         });     })(i) }

Musa Over a year ago

@Smudger try this $(document).ready(function(){/*your code here*/});

PSL · Accepted Answer · 2013-04-24 22:26:52Z

3

Is this what you are looking for? http://jsfiddle.net/WrvmW/

$("table.authors-list tr").each(function () {
   var cubes = parseFloat($('input[name^="cubicmeters"]',this).val(), 10);
    var cubesperbundle = parseFloat($('input[name^="cubesperbundle"]',this).val(), 10);
    $('input[name^="bundles"]',this).val((cubes*cubesperbundle).toFixed(2))

});

There were some error in your javascript and you need to parseFloat it for performing operations. Another thing is you dont have to complicate it by each ing on the input and finding the closest. You can directly loop through trs.

answered Apr 24, 2013 at 22:26

PSL

124k21 gold badges257 silver badges243 bronze badges

1 Comment

Smudger Over a year ago

Hi, it didn't and probably my fault as I failed to mention that this script will be called from within the body. can this work if in the body itself. trouble is the cubicmeters and cubesperbundle are populated by an earlier jquery function and this is run in the body so I need to trigger this script from the body, after the inputs have been populated. Thanks

Kenneth · Accepted Answer · 2013-04-24 22:27:36Z

1

You have got error in your javascript:

$("table.authors-list").find('input[name^="cubicmeters1"]').each(function () {
    // you haven't declared cubes
    // you have a + in front of $
    // you're not parsing the string (use parseFloat)
    cubes += +$(this).closest('tr').find('input[name^="cubicmeters"]').val();
    cubesperbundle += +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
    +$(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
});

The following should work:

$(function(){       
        $("table.authors-list").find('input[name^="cubicmeters1"]').each(function () {
            var cubes;
            var cubesperbundle;
            cubes = parseFloat($(this).closest('tr').find('input[name^="cubicmeters"]').val());
            cubesperbundle = parseFloat($(this).closest('tr').find('input[name^="cubesperbundle"]').val());
            $(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
        });
});

answered Apr 24, 2013 at 22:27

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

2 Comments

Musa Over a year ago

OP is using + in front of $ to convert the string returned from val to a number.

Smudger Over a year ago

Thanks Kenneth. Can this work if in the body itself. trouble is the cubicmeters and cubesperbundle are populated by an earlier jquery function and this is run in the body so I need to trigger this script from the body, after the inputs have been populated. Thanks

Kumsal Obuz · Accepted Answer · 2013-04-24 22:35:52Z

1

Of course if you change your table structure for some reason like more complex calculations there is always another way like addressing the issue with id selectors. You can see it at :

http://jsfiddle.net/ttZtX/24/

or here

$('input[name^="bundles"]').each(function () {
  var id = $(this).attr('id').replace("bundles", "");

  var cubes = +$("#cubicmeters" + id).val();

  var cubesperbundle = +$("#cubesperbundle" + id).val();

  $(this).val((cubes*cubesperbundle).toFixed(2));
});

where each bundle is already carrying its id number so you can find related number of items and add them to your calculation logic.

answered Apr 24, 2013 at 22:35

Kumsal Obuz

8255 silver badges14 bronze badges

2 Comments

Smudger Over a year ago

Thanks kubarium. can this work if in the body itself. trouble is the cubicmeters and cubesperbundle are populated by an earlier jquery function and this is run in the body so I need to trigger this script from the body, after the inputs have been populated. Thanks

Kumsal Obuz Over a year ago

This technique can work anywhere on the page since you are selecting with IDs but not in nested places. To answer your other question, let's say you have a button that will trigger this calculation, put all this code in the click event handler of that button. So, when it's clicked it'll try to find bundles, cubicmeters and etc even though they have been put in the DOM after page load. What you ultimately need sounds like a different question so you may want to open a new thread instead so other can easily find it. It'd get lost here in the comments area.

Collectives™ on Stack Overflow

jquery to loop through each table row and perform math with each row input field

4 Answers 4

4 Comments

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related