ネストされたフォームを使用しました。これは、請求書アプリケーションの行ごとの合計と総合計を見つけるための私のjqueryコードです。
$("tr.sum_hours td").on("change", '.hr', function() {
row = $(this).parent("td").parent();
total = 0;
qnt = 0;
rate = 0;
discount = 0;
tax = 0;
$(row).find("td input.hr").each(function(index) {
if ($(this).val() !== "") {
if ($(this).hasClass('quantity')){
qnt = parseFloat($(this).val());
}
if($(this).hasClass('rate')){
rate = parseFloat($(this).val());
}
if($(this).hasClass('discount')){
discount = parseFloat($(this).val());
}
if($(this).hasClass('tax')){
tax = parseFloat($(this).val());
}
return total = ((qnt*rate)-(discount)+(tax))
}
});
$(row).find("td input.total").val(total);
grand_total = 0;
return $(".total").each(function() {
if ($("#invoice_grand_total") !== "") {
grand_total = grand_total + parseFloat($(this).val());
}
return $("#invoice_grand_total").val(grand_total);
});
});
これは私のhtmlコードです。
<table class='item_details'>
<thead>
<tr>
<th>Item name</th>
<th>Description</th>
<th>Qty</th>
<th>Rate</th>
<th>Discount</th>
<th>Tax</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody class='item_details_input'>
<tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_0_item_name" name="invoice[item_details_attributes][0][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_0_description" name="invoice[item_details_attributes][0][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_0_quantity" name="invoice[item_details_attributes][0][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_0_rate" name="invoice[item_details_attributes][0][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_0_discount" name="invoice[item_details_attributes][0][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_0_tax" name="invoice[item_details_attributes][0][tax]" size="30" type="text" /></td>
<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_0_total" name="invoice[item_details_attributes][0][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr>
<tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_1_item_name" name="invoice[item_details_attributes][1][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_1_description" name="invoice[item_details_attributes][1][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_1_quantity" name="invoice[item_details_attributes][1][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_1_rate" name="invoice[item_details_attributes][1][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_1_discount" name="invoice[item_details_attributes][1][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_1_tax" name="invoice[item_details_attributes][1][tax]" size="30" type="text" /></td>
<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_1_total" name="invoice[item_details_attributes][1][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr>
</tbody>
</table>
このコードは静的行で機能しています。ただし、動的に追加された行では機能しません。助けてください。