javascript - Jquery 表单计算不对齐

Question

我试图让这个 jQuery 数学与我的表单一起工作，我的代码片段可以正常工作，但是当转移到所需的表单时，我无法让它对齐以运行所需的数学。

任何指向我哪里出错的指针。

<script type="text/javascript" src="jquery-1.12.3.js"></script>
  <script>
    jQuery(function($) {

    $(".Qty1, .TradePrice1").change(function() {
        var total = 0;
        $(".Qty1").each(function() {
            var self = $(this),
                TradePrice1 = self.next(".TradePrice1"),
                subtotal = parseInt(self.val(), 10) * parseFloat(TradePrice1.val(), 10);
            total += (subtotal || 0);
        });
        $("#total1").val(total);
    });

    });
    </script>

  <tr>
    <th><div align="center">
      <input type='text' name='F01u1' id='F01u1' />
    </th>
    <td>
      <input type='text' name='Model1' id='Model1' />
    </td>
    <td>
      <input type='text' name='Description1' id='Description1' />
   </td>
    <td>
      <input type="text" name='TradePrice1' id='TradePrice1' />
   </td>
    <th>
      <input type="text" name='Qty1' id='Qty1' />
    </th>
    <td>
      <input type='text' name='Total1' id='Total1' />
    </div></td>
  </tr>

Answer 1

您的代码中有很多问题。

• 输入将具有重复的无效 id 属性。你应该改用类
• 您有一些无关的 div 元素，除了不需要之外，它们没有正确打开或关闭。
• parseFloat() 只接受一个参数
• total 字段不是只读，因此任何人都可以将其修改为所需的任何值。
• 您的代码计算出所有行的总数并将其放在每一行的末尾
• .TradePrice1 不是 .Qty1 的兄弟，因此它永远不会在 next() 调用中找到

考虑到所有这些，您可以大大改进您的代码。试试这个:

$(".qty, .tradeprice").change(function() {
    var total = 0;
    $(".qty").each(function() {
        var $qty = $(this),
            $row = $qty.closest('tr'),
            $tradePrice = $row.find('.tradeprice'),
            $subtotal = $row.find('.subtotal');
        subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
        total += subtotal;
        $subtotal.val(subtotal);
    });
    $('.total').val(total);
}).change();

input {
    width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>
            <input type='text' name='F01u1' class='F01u1' />
        </th>
        <td>
            <input type='text' name='Model' class='model' />
        </td>
        <td>
            <input type='text' name='Description' class='description' />
        </td>
        <td>
            <input type="text" name='TradePrice' class='tradeprice' value="100" />
        </td>
        <th>
            <input type="text" name='Qty' class='qty' value="2" />
        </th>
        <td>
            <input type='text' name='Total' class='subtotal' readonly="true" />
        </td>
    </tr>
    <tr>
        <th>
            <input type='text' name='F01u1' class='F01u1' />
        </th>
        <td>
            <input type='text' name='Model' class='model' />
        </td>
        <td>
            <input type='text' name='Description' class='description' />
        </td>
        <td>
            <input type="text" name='TradePrice' class='tradeprice' value="123" />
        </td>
        <th>
            <input type="text" name='Qty' class='qty' value="5" />
        </th>
        <td>
            <input type='text' name='Total' class='subtotal' readonly="true" />
        </td>
    </tr>
    <tr>
        <td colspan="6" align="right">
            Total: 

            <input type='text' name='Total' class='total' readonly="true" />
        </td>
    </tr>
</table>

请注意，默认值仅用于演示目的，如果需要可以删除。