如何对产品的第三类进行总结。
这是我的类似工作。
How to do summation of product of two input values from a clone table input values
$("table").on("change", "input", function() { //use event delegation
var tableRow = $(this).closest("tr"); //from input find row
var one = Number(tableRow.find(".one").val()); //get first textbox
var two = Number(tableRow.find(".two").val()); //get second textbox
var total = one * two; //calculate total
tableRow.find(".three").val(total); //set value
});
$("button.add").on("click", function() {
var tbody = $("table tbody");
tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});
function updateTotalOfSubTotal() {
var totalPoints = 0;
var tableRow = $(this).closest("tr");
var test = tableRow.find(".three").val();
totalPoints += test;
console.log(totalPoints);
}
updateTotalOfSubTotal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input class="one" /></td>
<td><input class="two" /></td>
<td><input class="three" readonly="readonly" /></td>
</tr>
</tbody>
</table>
<button class="add">Add</button>
答案 0 :(得分:0)
这很有效 - 每次注意键盘和循环.subTotal,而不仅仅是第一次
我已清理代码并使用其他问题中的HTML
function totalIt() {
var total = 0;
$(".subtotal").each(function() {
var val = this.value;
total += val == "" || isNaN(val) ? 0 : parseInt(val);
});
$("#total").val(total);
}
$(function() {
var $to_clone = $('.tr_clone').first().clone();
$("table").on('click', 'input.tr_clone_add', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $to_clone.clone();
$clone.find(':text').val('');
$tr.after($clone);
});
$("table").on('click', 'input.tr_clone_remove', function() {
var $tr = $(this).closest('.tr_clone');
if ($tr.index() > 1) $tr.remove(); // leave the first
totalIt();
});
$(document).on("keyup", ".quantity, .price", function() {
var $row = $(this).closest("tr"),
prce = parseInt($row.find('.price').val()),
qnty = parseInt($row.find('.quantity').val()),
subTotal = prce * qnty;
$row.find('.subtotal').val(isNaN(subTotal) ? 0 : subTotal);
totalIt()
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>U$ Price</th>
<th>Subtotal</th>
<th>Add</th>
<th>Remove</th>
</tr>
<tr class="tr_clone">
<td>
<select style="width:200px" name="itens[]">
<option value="0"></option>
<option value="1">Item A</option>
<option value="2">Item B</option>
<option value="3">Item C</option>
</td>
<td><input type="text" size="5" maxlength="5" name="qtd" class="quantity text ui-widget-content ui-corner-all"></td>
<td><input type="text" size="10" maxlength="10" name="price" class="price text ui-widget-content ui-corner-all"></td>
<td><input type="text" size="10" maxlength="10" name="subtotal" class="subtotal text ui-widget-content ui-corner-all"></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
<td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>
<input type="text" readonly id="total" />
&#13;