表中的计算字段仅针对第一行进行计算-遍历表中的行以计算列值

Question

I have a list of records in a table in my view that has a calculated column.

From the image, the column in question is the Mark-Up column, and its value is generated/calculated from Price, Casecost and Casesize. This column is only visual for the user and will never be saved in db/table. Value is calculated when page is loaded (next/previous for more than 10 rows). For each page on with the records its only calculating the value on the first row as seen in the picture.

CSHTML I have

@Html.TextBox("q_markup", null, new { @class = "calc markupclass", @readonly = "readonly" })

Javascript

function calculate() {

            //Fields that are used for calculations (declare variables)
            var casecost = parseFloat($('#item_q_casecost').val());
            var casesize = parseFloat($('#item_q_casesize').val());
            var price = parseFloat($('#item_q_sellprice').val());

            //calculations
            var unitcost = casecost / casesize;
            var markup = ((price - unitcost) / unitcost) * 100;

            //put calculated value into field
            $('#q_markup').val(markup.toFixed(2));           
    }

    $(document).ready(function () {
        calculate();
    });

What I have since tried is to have a loop in my calculate function in the following manner without any success

function calculate() {

//gather all markup fields on page
var rows = document.getElementsByClassName("markupclass");

//cycle through each rows and calculate
for (i = 0; i < rows.length; i++) {

    //do my calculations here
   }
}

How can I get this calculate that field for all rows?

Answer 1

Not exactly sure, but you could try fixing your for loop

function calculate() {

//gather all markup fields on page
var rows = document.getElementsByClassName("markupclass");

//ADDED - middle conditional - cycle through each rows and calculate
for (i = 0; i < rows.length; i++) {

    //do my calculations here
   }
}

Answer 2

This is how I managed to solve this for anyone who comes across this issue

First with the Table I have ( Note: class 'searchTable' )

<table id="ListTable" class="table searchTable">
    <tr>

Looping through the rows and getting the required values for each field

function calculate() {
        $('.searchTable tr').each(function () {

            //Fields that are used for calculations (declared variables)
            var casecost = $(this).find('#item_q_casecost').val();
            var casesize = $(this).find('#item_q_casesize').val();
            var price = $(this).find('#item_q_sellprice').val();
            var vat = $(this).find('#item_viewVat').val();

            //calculations - PREREQUISITES 
            var unitcost = casecost / casesize;
            var profit = (price - unitcost) - ((vat / 100) * price);

            //calculations - FIELD VALUES
            var markup = ((price - unitcost) / unitcost) * 100;
            var gprofit = (profit / price) * 100;

            //assign calculated values to table fields (columns)
            $(this).find('#q_markup').val(markup.toFixed(2));
            $(this).find('#q_grossprofit').val(gprofit.toFixed(2));

        });           
    }

GP and Mark-Up are the calculated field columns (in image)