开发者

Loop through dynamic javascript calculations

I have a table of selected products and I would like to use javascript to dynamically calculate certain values for the user without refreshing.

The user sees a number of fields: quantity input box (var t0), unit amount (var amt0), total amount (var ta0), unit weight (var weight0) and total weight (var tw0).

The following code works as I would like. The quantity input by the user is multiplied by the unit amount and set to total amount. The same is done for weight. The zeros refer to the FIRST appearance of a product. The issue is that we don't know how many products the user will select.

We can determine the number of products using arguments.length. My question is, how can I construct a loop to replace the 0 with perhaps the iteration variable i. We need to create the below script to correspond to the number of products selected.

//QTY FIELD
    var qtyVal0 = t0.value; 
//AMT FIELD
    var amtVal0 = amt0.innerHTML;
    ta0.value = qtyVal0 * amtVal0;
//WEIGHT FIELD
    var weightVal0 = weight0.innerHTML;
    tw0.value = qtyVal0 * weightVal0;

I tried using a 'for loop' and var ('qtyVal' + i) as well as var qtyVal + i. Plus every combination in between.

I also tried just duplicating the above working script a dozen times, but it unfortunately doesn't work when the number of duplications is different than the number of products.

Javascript is not my forte by any means, so any help (or a more efficient way to calculate) would be greatly appreciated. Thank you!

PS For all of my love and respect, I will also need to tackle the issue of adding all quantities, amounts, and weights in each of the three vertical columns. I'm not sure if this would affect the way that the calculations are designed. Once again, thank you!

UPDATE Here is the HTML code for the form displayed to the user. I generate it in another php script and insert it into the page once the user selects from a list of products. It displays 3 products currently, but as mentioned, this can change to any number. Hopefully this is clearer. Do let me know. Cheers.

<table border="0" cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <td><!--PRODUCTS SELECTED WILL BE DISPLAYED HERE -->

        <div id="txtHint">
          <table id="products" width="1050" cellpadding="5" border="1">
            <tbody>
              <tr>
                <th>QTY</th>
                <th>Product</th>
                <th>Unit Cost</th>
                <th>Unit Measure</th>
                <th>Amount</th>
                <th>Total Amount</th>
                <th>Weight</th>
                <th>Total Weight</th>
                <th>LBS / KGS</th>
                <th>Rec D</th>
                <th>Rec Q</th>
                <th>Status</th>
              </tr>
              <tr>
                <td><input name="t0" id="t0" type="text" onkeyup="return autocalc(this,t1,t2)" size="5" maxlength="5" tabindex="$i"></td>
                <td>Catalogue</td>
                <td>$150</td>
                <td>Each</td>
                <td><span id="amt0">10</span></td>
                <td><input name="ta0" id="ta0" type="text" readonly="readonly" value="10" size="5" maxlength="5" tabindex="-1"></td>
                <td><span id="weight0">101</span></td>
                <td><input name="tw0" id="tw0" type="text" readonly="readonl开发者_如何学JAVAy" value="101" size="5" maxlength="5" tabindex="-1"></td>
                <td>LBS</td>
                <td>REC D</td>
                <td>REC Q</td>
                <td>STATUS</td>
              </tr>
              <tr>
                <td><input name="t1" id="t1" type="text" onkeyup="return autocalc(this,t0,t2)" size="5" maxlength="5" tabindex="$i"></td>
                <td>Product2</td>
                <td>$18</td>
                <td>Each</td>
                <td><span id="amt1">15</span></td>
                <td><input name="ta1" id="ta1" type="text" readonly="readonly" value="15" size="5" maxlength="5" tabindex="-1"></td>
                <td><span id="weight1">50</span></td>
                <td><input name="tw1" id="tw1" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
                <td>LBS</td>
                <td>REC D</td>
                <td>REC Q</td>
                <td>STATUS</td>
              </tr>
              <tr>
                <td><input name="t2" id="t2" type="text" onkeyup="return autocalc(this,t0,t1)" size="5" maxlength="5" tabindex="$i"></td>
                <td>Product3</td>
                <td>$236</td>
                <td>Each</td>
                <td><span id="amt2">1</span></td>
                <td><input name="ta2" id="ta2" type="text" readonly="readonly" value="1" size="5" maxlength="5" tabindex="-1"></td>
                <td><span id="weight2">50</span></td>
                <td><input name="tw2" id="tw2" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
                <td>LBS</td>
                <td>REC D</td>
                <td>REC Q</td>
                <td>STATUS</td>
              </tr>
              <tr>
                <td><input name="total" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><input name="totalAmount" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
                <td>&nbsp;</td>
                <td><input name="totalWeight" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div></td>
    </tr>
    <tr>
      <td><input type="submit" id="submitbtn" name="submit" value="Save Changes">
        <input type="hidden" name="action" value="create_po"></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>


If you're dead-set on calculating this from the HTML/DOM itself, you'll need to iterate over the appropriate table rows (consider using jQuery, you'll be glad), pull out the data in question from (what, table cells?), convert it to numbers, and do the math as normal.

There are a number of ways to do this, but it depends a lot on the HTML you're pulling the data from.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜