CODEWITHSUNDEEP
jquery
Smudger
Smudger

Reputation: 10809

jquery to loop through rows and perform a math function

I have a script that runs through a table, not ideal but I need to get it working.

The table fields cubicmeters and cubesperbundle are populated by an earlier script.

What I need to do, is now loop through the table and perform a math function on the inputs for each row.

I have a variable rows that has the number of rows and can be used for the variable I which will reference each row.

for (var i = 1; i <= rows; i++) {

            var cubes = +$(this).closest('tr').find('input[name^="cubicmeters"+i]').val(); // reference the row 'i'
            var cubesperbundle = +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
            $(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));

}

A few things to note, this query is not in the head but inside a script tag at bottom of page. reason being that the table is populated with PHP so the head script will run before the inputs are loaded. as such I have put this script at the bottom of the page. In addition the jquery that populates cubicmeters and cubesperbundle only runs after the PHP populates the inputs that cubicmeters and cubesperbundle reply on to be populated.

so order: PHP populates a productcode. jquery (called from bottom of page) populates the cubicmeters and cubesperbundle fields based on the productcode. This must all happen on loading the page without any user trigger required.

Lastly, I need the jquery script to populate the bundles field with the result of cubesperbundle*cubicmeters

my html beofre this script must run is:

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

jsfiddle is here: http://jsfiddle.net/WfemC/

This obviously is not working hence my question.

Thanks for your help.

UPDATE

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

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


$('#ordertable tr').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^="totalbundles"]').val((cubes*cubesperbundle).toFixed(2));
});

Thanks

Upvotes: 1

Views: 846

Answers (2)

pdegand59
pdegand59

Reputation: 13039

you can use the .each() function from jQuery to loop on each line, then you can use $(this) on each loop to work on the current line.

Fiddle example.

EDIT : Updated Fiddle with separated functions

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You are doing it all wrong use .each() because for loop not getting $(this)

Working DEMO

EDIT

HTML

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

jQuery Code

$('#ordertable tr').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));
});

Upvotes: 1

Related Questions