Question

我有一个选定产品的表格，我想使用javascript动态计算用户的某些值而不刷新。

用户会看到许多字段：数量输入框（ var t0 ），单位金额（ var amt0 ），总金额（ var ta0 ），单位重量（ var weight0 ）和总重量（ var tw0 ）。

以下代码可以按照我的意愿运行。用户输入的数量乘以单位金额并设置为总金额。对于重量也是如此。零指的是产品的第一个外观。问题是我们不知道用户将选择多少产品。

我们可以使用 arguments.length 确定产品数量。我的问题是，如何构造一个循环来替换0可能是迭代变量i。我们需要创建以下脚本以对应于所选产品的数量。

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

我尝试使用'for循环'和var ('qtyVal' + i)以及var qtyVal + i。加上两者之间的所有组合。

我还尝试过多次重复上述工作脚本，但遗憾的是，当重复次数与产品数量不同时，它不起作用。

Javascript不是我的强项，所以任何帮助（或更有效的计算方法）都将非常感激。谢谢！

PS 为了我所有的爱和尊重，我还需要解决在三个垂直列中添加所有数量，数量和重量的问题。我不确定这是否会影响计算的设计方式。再一次，谢谢！

更新以下是向用户显示的表单的HTML代码。我在另一个php脚本中生成它，并在用户从产品列表中选择后将其插入到页面中。它目前显示3个产品，但如上所述，这可以更改为任何数字。希望这更清楚。请告诉我。欢呼声。

<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="readonly" 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>

Answer 1

如果你从HTML / DOM本身开始计算它，你需要迭代相应的表行（考虑使用jQuery，你会很高兴），从中提取有问题的数据（什么，表格单元？），将其转换为数字，并正常进行数学计算。

有很多方法可以做到这一点，但这很大程度上取决于您从中提取数据的HTML。

循环动态javascript计算

1 个答案: