计算 Jquery 中带有克隆行的两个字段

Question

根据我的截图：https://drive.google.com/file/d/1N3ozAMXjbpyjmMNIE7xk6kOvZRB58Koy/view

Muy 第一行额外项目和选项工作正常，我使用 PHP 变量/计数器创建了这些函数。

因此，当我克隆带有红色箭头的新额外内容和选项行时，我打算对 Jquery 和计数器执行相同的操作，但不起作用。

请参阅此处运行的文件：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);
});

});

并且工作，但仅在当前克隆的行中，因此当克隆新行时，前一行不起作用。

Answer 1

假设这两个元素在 HTML 中被放置在同一个层次结构中。将以下类添加到 #priceoptc 元素：priceElement，对于 #qtyoptc 元素具有 qtyElement，对于 #totaloptc 元素，请使用 totalElement 类。

然后使用以下代码：

$('#priceoptc'+opcionescant).keyup(function (event) {
//calculate the total amount of this option
var amountextra = 0;
amountextra =((Number($(event.target).val()))*(Number($(event.target).siblings('.qtyElement').val())));
$(event.target).siblings('.totalElement').val(amountextra);
});

请考虑HTML结构的假设，如果你的假设比我假设的更复杂，那么请提到HTML结构。

Answer 2

<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);
});