jQuery來自表的輸入總和

Question

我試圖從表中獲取輸入的總和。 目前我有：

HTML：

<tr id='saved1'>
<td><input class='qty'/></td>
<td><input class='price'/></td>
<td><input class='subtotal'/></td>
</tr>

jQuery：

//COUNT ALL FIELDS
function calculateSum() {
  $("[id^=saved]").each(function() {
    sum = $(this).parent().parent().find('.qty').val() * $(this).parent().parent().find('.price').val();
  $(this).parent().parent().find('.subtotal').val(sum);
    });
  }

// On change
$("input").change(calculateSum);

有任何想法嗎？

Answer 1

您的DOM遍歷是錯誤的。 您不需要上父母，只需要查找該行中的元素。

function calculateSum() {
    $("[id^=saved]").each(function() {
        var sum = $(this).find('.qty').val() * $(this).find('.price').val();
        if (!isNaN(sum)) {
            $(this).find('.subtotal').val(sum);
        }
    });
}

如果行是動態添加的，則需要使用事件委托進行綁定：

$("#tableID").on('change', 'input', calculateSum);

演示

Answer 2

好的，所以您的代碼有各種各樣的問題（我相信橫向運算是錯誤的，您正在乘法而不是加法，並且您不檢查非數字/ NaN），並且我將解決盡可能多的問題。我可以。

級聯的組織風格很難理解。 使用變量可以更容易閱讀和調試。 如您所見，我用一個var聲明聲明了多個變量。 使用var 。 它使變量成為局部變量，而不是全局變量，因此您可以在其他位置定義sum而不用弄亂原始功能。

您還可以嘗試將2個未經檢查的輸入加在一起。 如您所見，我正在使用按位運算符：

qty = grandparent.find('.qty').val() | 0,

如果qty不是整數，則返回0 。 這很重要，否則它將假定輸入為字符串，然后追加一個，而不是將它們加在一起。

我也強烈建議您避免使用諸如$("[id^=saved]")標簽。 按屬性選擇可能非常昂貴/緩慢。 不必擔心，但是您會在下面看到如何避免使用該選擇器。 您通常希望使用id，class，tag或變量作為選擇器。

function calculateSum() {
    var $this = $(this),
        grandparent = $(this).parent().parent(),
        qty = grandparent.find('.qty').val() | 0,
        price = grandparent.find('.price').val() | 0,
        sum = qty + price;
    $('.subtotal').val(sum);
}

// On change
$("input").change(calculateSum);

工作提琴

Answer 3

吉賓

function foo(){
    foo.total += $(this).val() - 0;
}
function calcField(selector){
    foo.total = 0;
    $(selector).each(foo)
    $(selector+'total').val(foo.total);
}
function calcFields(){
    var fields = [".qty",".price",".subtotal"];
    for(var i in fields){
        calcField(fields[i]);
    }
}
$('button').on('click',calcFields);