如何使用jQuery匯總表中未定義數量的輸入？

Question

我有一個表，並且行數不確定，這意味着人們可以在客戶端添加/刪除行。 我想做的是，當某人在兩個輸入（數量和比率）中輸入新值時，我想做一些加法和乘法運算並將其作為總和輸出到頁面。

每行都有數量和比率。 每行應有總計=數量*費率。 然后，我想對總計進行總計。 我希望能夠在用戶輸入其信息時在客戶端進行此操作。 這些字段如下所示：

     <tbody id='line-items'>
        <tr class='fields'>
          <td><input id="invoice_invoice_line_items_attributes_0__destroy" name="invoice[invoice_line_items_attributes][0][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="invoice_line_items">X</a></td>
          <td><input id="invoice_invoice_line_items_attributes_0_description" label="false" name="invoice[invoice_line_items_attributes][0][description]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_0_quantity" label="false" name="invoice[invoice_line_items_attributes][0][quantity]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_0_rate" label="false" name="invoice[invoice_line_items_attributes][0][rate]" size="30" type="text" /></td>
        </tr>
        <tr class='fields'>
          <td><input id="invoice_invoice_line_items_attributes_1__destroy" name="invoice[invoice_line_items_attributes][1][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="invoice_line_items">X</a></td>
          <td><input id="invoice_invoice_line_items_attributes_1_description" label="false" name="invoice[invoice_line_items_attributes][1][description]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_1_quantity" label="false" name="invoice[invoice_line_items_attributes][1][quantity]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_1_rate" label="false" name="invoice[invoice_line_items_attributes][1][rate]" size="30" type="text" /></td>
        </tr>
        <tr class='fields'>
          <td><input id="invoice_invoice_line_items_attributes_2__destroy" name="invoice[invoice_line_items_attributes][2][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="invoice_line_items">X</a></td>
          <td><input id="invoice_invoice_line_items_attributes_2_description" label="false" name="invoice[invoice_line_items_attributes][2][description]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_2_quantity" label="false" name="invoice[invoice_line_items_attributes][2][quantity]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_2_rate" label="false" name="invoice[invoice_line_items_attributes][2][rate]" size="30" type="text" /></td>
        </tr>
      </tbody>

如何使用jquery在可變數量的行上執行此操作，然后將其輸出到頁面？ 謝謝！

編輯：我很早就試圖找出如何從每一行中獲取正確輸入的方法，就像這樣：

$('table input[id^=invoice_invoice_line_items_attributes]')

它抓住所有行，但我不確定如何跳過ID中的數字並檢查ID的最后一個字以確保它是數量或比率。

Answer 1

var sum = 0;
$('#line_items input[id$="quantity"]').each(function() {
  sum += parseInt($(this).val());
});

如果數字為浮點數，也可以使用parseFloat