在jQuery中计算具有克隆行的两个字段 [英] Calculation of two fields with cloned rows in Jquery
本文介绍了在jQuery中计算具有克隆行的两个字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据我的屏幕截图: https://drive.google.com/file/d/1N3ozAMXjbpyjmMNIE7xk6kOvZRB58Koy/view
多余的项目和选项的第一行工作正常，我使用PHP变量/计数器创建了这些函数.
Muy first row of extras items and options are working fine, I created these functions with a PHP variable/counter.
因此，当我克隆红色和红色箭头所示的附加项和选项的新行时，我打算对Jquery和一个计数器执行相同的操作，但不起作用.
So, I intend to do the to do the same with Jquery and a counter when I clone new rows of extras and options as show with the red arrows, but does not work.
请查看在此处运行的文件: https://quotations.casalindacity.com/newquotation.php
Please, see the file running here: https://quotations.casalindacity.com/newquotation.php
//START CACULATION AUTOMATIC FOR OPCIONS ITEMS WITH JQUERY
for (var c = 1; c < opcionescant; c++) {
alert(c);
$('#priceoptc'+c).keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc'+c).val()))*(Number($('#qtyoptc'+c).val())));
$('#totaloptc'+c).val(amountextra);
});
$('#qtyoptc'+c).keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc'+c).val()))*(Number($('#qtyoptc'+c).val())));
$('#totaloptc'+c).val(amountextra);
});
}
//END CACULATION AUTOMATIC FOR OPCIONS ITEMS WITH JQUERY
我已经尝试过了:
$("#addRow10").click(function(){
opcionescant++;
//$("#options").clone().appendTo("#tableqtn");
var optrow = $("#options").clone(true,true);
//fixIds(optrow, opcionescant);//add this counter to the current id as a string
fixIds2(optrow, opcionescant);//add this counter to the current id and replace with current number
optrow.appendTo("#tableqtn");
//alert(opcionescant);
$('#priceoptc'+opcionescant).keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc'+opcionescant).val()))*(Number($('#qtyoptc'+opcionescant).val())));
$('#totaloptc'+opcionescant).val(amountextra);
});
$('#qtyoptc'+opcionescant).keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc'+opcionescant).val()))*(Number($('#qtyoptc'+opcionescant).val())));
$('#totaloptc'+opcionescant).val(amountextra);
});
});
并且有效，但仅在当前克隆的行中有效，因此，在克隆新行时，前一行无效.
And work but only in the current cloned row, so when a new row is cloned the previous one does not work.
推荐答案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript">
var opcionescant=1;
var extrascant=1;
$("#addRow10").click(function(){
opcionescant++;
var optrow = $("#options").clone(true,true);
fixIds2(optrow, opcionescant);//add this counter to the current id and replace with current number
optrow.appendTo("#tableqtn");
createopcion(opcionescant);
});
$("#clonarextra").click(function(){
extrascant++;
var extrow = $("#trextra").clone(true,true);
fixIds2(extrow, extrascant);//add this counter to the current id and replace with current number
if (extrascant==2){
extrow.insertAfter("#trextra");
}else{
extrow.insertAfter("#trextra"+(extrascant-1));
}
createextra(extrascant);
});
function createopcion(i) {
$('#priceoptc'+i).keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc'+i).val()))*(Number($('#qtyoptc'+i).val())));
$('#totaloptc'+i).val(Math.round(amountextra));
});
$('#qtyoptc'+i).keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc'+i).val()))*(Number($('#qtyoptc'+i).val())));
$('#totaloptc'+i).val(Math.round(amountextra));
});
}
function createextra(i) {
$('#ext'+i).change(function () {
//==========get villa price------------------
var extraid = this.value;
$.ajax({
type: 'POST',
url: 'ajax/extradetails.php',
data: { extraselected: extraid },
dataType: 'json',
cache: false,
success: function(response) {
$('#priceext'+i).val(response['sales']);
switch(response['unit']) {
case 'm2':
var unithtml='m<sup>2</sup>';
// code block
break;
case 'lm':
var unithtml='lm';
// code block
break;
case 'gl':
var unithtml='gls';
// code block
break;
case 'm3':
var unithtml='m<sup>3</sup>';
// code block
break;
case 'set':
var unithtml='set';
// code block
break;
case 'pc':
var unithtml='pc.';
// code block
break;
default:
var unithtml='m<sup>2</sup>';
// code block
}
$("#funit"+i).html(unithtml);
$("#tunit"+i).html(unithtml);
}
});
//get the qtn of this extra
var qtnextra = 0;
qtnextra =Number($('#toext'+i).val())-Number($('#fromext'+i).val());
$('#qtyext'+i).val(qtnextra.toFixed(2));
//calculate the total amount of this extra
var amountextra = 0;
amountextra =((Number($('#qtyext'+i).val()))*(Number($('#priceext'+i).val())));
$('#totalext'+i).val(Math.round(amountextra));
//get total amount including extras
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#totalPrice').val(Math.round(sum));
//get the total including discount
var neto = 0;
neto =Number($('#totalPrice').val())-Number($('.discount').val());
$('#totalNet').val(Math.round(neto));
});
//update from and to when numbers change
$('#fromext'+i).keyup(function () {
//get the qtn of this extra
var qtnextra = 0;
qtnextra =Number($('#toext'+i).val())-Number($('#fromext'+i).val());
$('#qtyext'+i).val(qtnextra.toFixed(2));
//calculate the total amount of this extra
var amountextra = 0;
amountextra =((Number($('#qtyext'+i).val()))*(Number($('#priceext'+i).val())));
$('#totalext'+i).val(Math.round(amountextra));
//get total amount including extras
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#totalPrice').val(Math.round(sum));
//get the total including discount
var neto = 0;
neto =Number($('#totalPrice').val())-Number($('.discount').val());
$('#totalNet').val(Math.round(neto));
});
$('#toext'+i).keyup(function () {
//get the qtn of this extra
var qtnextra = 0;
qtnextra =Number($('#toext'+i).val())-Number($('#fromext'+i).val());
$('#qtyext'+i).val(qtnextra.toFixed(2));
//calculate the total amount of this extra
var amountextra = 0;
amountextra =((Number($('#qtyext'+i).val()))*(Number($('#priceext'+i).val())));
$('#totalext'+i).val(Math.round(amountextra));
//get total amount including extras
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#totalPrice').val(Math.round(sum));
//get the total including discount
var neto = 0;
neto =Number($('#totalPrice').val())-Number($('.discount').val());
$('#totalNet').val(Math.round(neto));
});
}
//If elem is the parent of your cloned structure and cntr is the counter you said you were maintaining, you can fix all ids in that cloned structure like this:
function fixIds(elem, cntr) {
$(elem).find("[id]").add(elem).each(function() {
this.id = this.id + cntr;
})
}
//If the ids might already have a cloned number at the end and you want to replace that number, you can do so like this:
function fixIds2(elem, cntr) {
$(elem).find("[id]").add(elem).each(function() {
this.id = this.id.replace(/\d+$/, "") + cntr;
})
}
// DELETE TABLE ROW.
function removeRow(oButton) {
var empTab = document.getElementById('tableqtn');
empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // BUTTON -> TD -> TR.
}
function r2dec(i) {
return Number(i.toFixed(2));
}
function rNOde(i) {
return Number(Math.round(i));
}
$('#ext1').change(function () {
//==========get villa price------------------
var extraid = this.value;
$.ajax({
type: 'POST',
url: 'ajax/extradetails.php',
data: { extraselected: extraid },
dataType: 'json',
cache: false,
success: function(response) {
$('#priceext1').val(response['sales']);
$('#unitext1 option[value="'+response['unit']+'"]');
switch(response['unit']) {
case 'm2':
var unithtml='m<sup>2</sup>';
// code block
break;
case 'lm':
var unithtml='lm';
// code block
break;
case 'gl':
var unithtml='gls';
// code block
break;
case 'm3':
var unithtml='m<sup>3</sup>';
// code block
break;
case 'set':
var unithtml='set';
// code block
break;
case 'pc':
var unithtml='pc.';
// code block
break;
default:
var unithtml='m<sup>2</sup>';
// code block
}
$("#funit1").html(unithtml);
$("#tunit1").html(unithtml);
}
});
//get the qtn of this extra
var qtnextra = 0;
qtnextra =$('#toext1').val()-$('#fromext1').val();
$('#qtyext1').val(qtnextra.toFixed(2));
//calculate the total amount of this extra
var amountextra = 0;
amountextra =((Number($('#qtyext1').val()))*(Number($('#priceext1').val())));
$('#totalext1').val(Math.round(amountextra));
//get total amount including extras
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#totalPrice').val(Math.round(sum));
//get the total including discount
var neto = 0;
//neto =Number($('#totalPrice').val())-Number($('.discount').val());
neto =Number($('#totalPrice').val())-Number($('.discount').val());
$('#totalNet').val(Math.round(neto));
});
//update from and to when numbers change
$('#fromext1').keyup(function () {
//get the qtn of this extra
var qtnextra = 0;
qtnextra =$('#toext1').val()-$('#fromext1').val();
$('#qtyext1').val(qtnextra.toFixed(2));
//calculate the total amount of this extra
var amountextra = 0;
amountextra =((Number($('#qtyext1').val()))*(Number($('#priceext1').val())));
$('#totalext1').val(Math.round(amountextra));
//get total amount including extras
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#totalPrice').val(Math.round(sum));
//get the total including discount
var neto = 0;
neto =Number($('#totalPrice').val())-Number($('.discount').val());
$('#totalNet').val(Math.round(neto));
});
$('#toext1').keyup(function () {
//get the qtn of this extra
var qtnextra = 0;
qtnextra =$('#toext1').val()-$('#fromext1').val();
$('#qtyext1').val(qtnextra.toFixed(2));
//calculate the total amount of this extra
var amountextra = 0;
amountextra =((Number($('#qtyext1').val()))*(Number($('#priceext1').val())));
$('#totalext1').val(Math.round(amountextra));
//get total amount including extras
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#totalPrice').val(Math.round(sum));
//get the total including discount
var neto = 0;
neto =Number($('#totalPrice').val())-Number($('.discount').val());
$('#totalNet').val(Math.round(neto));
});
$('#priceoptc1').keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc1').val()))*(Number($('#qtyoptc1').val())));
$('#totaloptc1').val(Math.round(amountextra));
});
$('#qtyoptc1').keyup(function () {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($('#priceoptc1').val()))*(Number($('#qtyoptc1').val())));
$('#totaloptc1').val(Math.round(amountextra));
});
</script>
这是我的解决方案:
var opcionescant=1;
var extrascant=1;
$("#addRow10").click(function(){
opcionescant++;
var optrow = $("#options").clone(true,true);
fixIds2(optrow, opcionescant);//add this counter to the current id and replace with current number
optrow.appendTo("#tableqtn");
createopcion(opcionescant);
});
$("#clonarextra").click(function(){
extrascant++;
var extrow = $("#trextra").clone(true,true);
fixIds2(extrow, extrascant);
if (extrascant==2){
extrow.insertAfter("#trextra");
}else{
extrow.insertAfter("#trextra"+(extrascant-1));
}
createextra(extrascant);
});
这篇关于在jQuery中计算具有克隆行的两个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
