0

我有一个表,行数未定义,这意味着人们可以在客户端添加/删除行。我想做的是当有人在两个输入(数量和速率)中输入新值时,我想做一些加法和乘法,并将其作为总和输出到页面。

每行都有数量和费率。每行应该有总计 = 数量 * 费率。然后,我想总结一下所有的总数。当用户输入他们的信息时,我希望能够在客户端执行此操作。以下是这些字段的样子:

     <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 的最后一个单词以确保它是数量或费率。

4

1 回答 1

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

如果数字是浮点数,您也可以使用 parseFloat

于 2013-04-03T21:04:08.877 回答