动态字段 - 添加总计

Question

我一直在尝试找到一种方法来完成这项工作，但结果只能接近“NaN”。

我有下表：

     <table border="1" class="autoTable">

     <tr><td><input name="description[]" id="description" value="<?php echo $description; ?>" size="55" onKeyPress="return disableEnterKey(event)" />
    </td><td align="center"><input type="checkbox"  name="stocked[]" id="stocked" value="<?php echo $stocked; ?>" size="5" onKeyPress="return disableEnterKey(event)" />
    </td><td><input name="quantity[]" id="quantity" value="<?php echo $quantity; ?>" size="5" onKeyPress="return disableEnterKey(event)" />
    </td><td><input name="partPrice[]" id="partPrice" value="<?php echo $partPrice; ?>" size="10" onKeyPress="return disableEnterKey(event)" />
    </td><td><input name="hours[]" id="hours" value="<?php echo $hours; ?>" size="10" onKeyPress="return disableEnterKey(event)" />
    </td><td><select name="rate[]" id="rate" onKeyPress="return disableEnterKey(event)">
    <?php
        //Connect to mysql db and retrieve the rate options  
    ?>
    </select>
    </td><td><!--<span class="amount"></span>--><input name="total[]" id="total" size="10" class="amount" onKeyPress="return disableEnterKey(event)" />
    </td><td align="center"><input type="checkbox" name="approved[]" id="approved" value="<?php echo $approved; ?>" size="10" onKeyPress="return disableEnterKey(event)" />
    </td><td align="center"><img src="img/plus.png" width="25" height="25" id="addButton" title="Add New Row" class="addRow" />
    </td><td align="center"><img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" />
    </td></tr>
    </table>

我想要做的是让总字段显示数量 x 部分价格加上小时 x 费率（从数据库中提取并在选择中列出）。我更喜欢动态地执行此操作，以便即时更新。我有“添加”和“删除”按钮，因此我们可以根据需要添加任意数量的行。

我还希望在页面底部有一个总计 - 但只有在单击“已批准”时才添加每一行。

我一直在尝试做的，至少暂时是这个jquery：

     $('#hours').blur(function() {
        $('tr').each(function(){
            var total = 0;
            total = parseFloat($(this).find('input[name=quantity]').val());
            $(this).find('.amount').val(parseFloat(total));
        });
     });

这会呈现 NaN，我无法完全弄清楚我做错了什么。我什至还没有进入批准复选框或最终总数。

此外，如果我在将数字打入数量、价格和小时数字段之前添加一个动态行，NaN 将显示在每个总数中。这可能是因为我没有指定数组，它只是使用了 class="amount" 的所有字段（这是所有总数）。

我能做的是使用我的提交按钮，它会提取任何和所有字段的值，因此数据库输入不是问题 - 但动态计算总数似乎是。

如果有任何见解和帮助，我将不胜感激。

谢谢

Answer 1

改变这一行...

total = parseFloat($(this).find('input[name=quantity]').val());

...到...

total = parseFloat($(this).find('input[name=quantity]').val()) || 0;

否则空字符串上的parseFloat() 将产生NaN。 NaN 是有毒的，如果它出现在你的数学中，它总是会导致 NaN。

您还需要在内循环之外声明total，并仅在末尾（循环外）设置值。

Answer 2

试试：

变量总计 = 0; $('tr').each(函数(){ 总计 += parseFloat($(this).find('input[name=quantity[]]').val()); $(this).find('.amount').val(parseFloat(total)); });

希望对你有帮助