2

Tengo dos tablas a las que se agregan dinámicamente filas. Con la orden onBlur llama a una función en varios campos. Esa función realiza un cálculo entre dos campos de cada fila y pone el resultado en otro campo. El problema es que sólo ejecuta correctamente la función pasando por el campo de la tabla activa y en la otra no se ejecuta.

function Calcular(ele) {
	var cantidad = 0, preciounitario = 0, totalservicio = 0;
	var cantidad_cadete = 0, preciounitario_cadete = 0, totalservicioCadete = 0;
	
	
	var tr = ele.parentNode.parentNode;
	var nodes = tr.childNodes;
	for (var x = 0; x<nodes.length;x++) {
		if (nodes[x].firstChild.id == "servicio_cantidad") {
			cantidad = parseFloat(nodes[x].firstChild.value);
		}
		if (nodes[x].firstChild.id == "servicio_preciounitario") {
			preciounitario = parseFloat(nodes[x].firstChild.value).toFixed(2);
		}
		if (nodes[x].firstChild.id == "servicio_preciototal") {
			totalservicio = parseFloat((preciounitario*cantidad)).toFixed(2);
			nodes[x].firstChild.value = totalservicio;
		}
		
		
		if (nodes[x].firstChild.id == "servicio_cantidad_cadete") {
			cantidad_cadete = parseFloat(nodes[x].firstChild.value);
		}
		if (nodes[x].firstChild.id == "servicio_preciounitario_cadete") {
			preciounitario_cadete = parseFloat(nodes[x].firstChild.value).toFixed(2);
		}
		if (nodes[x].firstChild.id == "servicio_preciototal_cadete") {
			totalservicioCadete = parseFloat((preciounitario_cadete*cantidad_cadete)).toFixed(2);
			nodes[x].firstChild.value = totalservicioCadete;
		}
	}
	    
	calcular_total();   
}



function calcular_total() {
	importe_total = 0
	$("#servicio .totalservicio").each(
		function(index, value) {
			importe_total = importe_total + eval($(this).val());
		}
	);
	var importe_totalEntero = importe_total; 
	var importe_total2Dec = importe_totalEntero.toFixed(2); 
	$("#TotalServiciosTabla #TotalServiciosInput").val(importe_total2Dec);
	$("#TotalServiciosTabla #TotalServicios").html(importe_total2Dec);
	
	
	importe_totalCadete = 0
	$("#TablaCadete .totalservicioCadete").each(
		function(index, value) {
			importe_totalCadete = importe_totalCadete + eval($(this).val());
		}
	);
	var importe_totalEnteroCadete = importe_totalCadete; 
	var importe_total2DecCadete = importe_totalEnteroCadete.toFixed(2); 
	$("#TotalServiciosTablaCadete #TotalServiciosInputCadete").val(importe_total2DecCadete);
	$("#TotalServiciosTablaCadete #TotalServiciosCadete").html(importe_total2DecCadete);
	

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<input type="hidden" id="contador-filas" value="0"><tr id="1"><td><input class="form-control servicio_cantidad" id="servicio_cantidad" name="servicio_cantidad[1]" placeholder="Cantidad1" size="5" type="t" maxlength="4" value="1" onblur="Calcular(this);" required=""> </td><td><select id="servicio_desc" name="servicio_desc[1]" class="form-control custom-select" onblur="Calcular(this);"><option value="">-Seleccione Servicio-</option><option value="253">29 - FRACCION CAPITAL FEDERAL</option></select></td><td><input class="form-control preciounitario" type="text" id="servicio_preciounitario" name="servicio_preciounitario[1]" placeholder="0,00" size="10" onblur="Calcular(this);" required=""> </td><td><input class="form-control totalservicio" type="text" id="servicio_preciototal" name="servicio_preciototal[1]" placeholder="0,00" size="10" readonly=""> </td><td><div id="del" class="btn btn-sm btn-danger">Eliminar</div></td></tr></tbody>
					  </table>
<table id="TotalServiciosTabla">
						<thead>
						  <tr>
						  <td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<th>TOTAL $</th>
							<td><div id="TotalServicios" style="text-align:right;font-weight: bold;">207.79</div></td>
						  </tr>
						
					  </thead></table>
</div>
	
<div class="w3l-table-info">
<table id="TablaCadete">
						<thead>
						  <tr>
							<th>Apellido y Nombre</th>
							<th>Cantidad</th>
							<th>Descripción</th>
							<th>Precio Unitario</th>
							<th>Total</th>
							<th><div id="addServCadete" class="btn btn-sm btn-success">Agregar</div></th>
						  </tr>
						</thead>
						<tbody>

						<tr id="1"><td><select id="cadete_desc" name="cadete_desc[1]" class="form-control custom-select"><option value="">-Seleccione Cadete-</option></select></td><td><input class="form-control cantidad_cadete" id="servicio_cantidad_cadete" name="servicio_cantidad_cadete[1]" placeholder="Cantidad1" size="5" type="text" value="1" onblur="Calcular(this);" required=""> </td><td><select id="servicio_desc_cadete" name="servicio_desc_cadete[1]" class="form-control custom-select" onblur="Calcular(this);"><option value="">-Seleccione Servicio-</option><option value="253">29 - FRACCION CAPITAL FEDERAL</option></select></td><td><input class="form-control preciounitario_cadete" type="text" id="servicio_preciounitario_cadete" name="servicio_preciounitario_cadete[1]" placeholder="0,00" size="10" onblur="Calcular(this);" required=""> </td><td><input class="form-control totalservicioCadete" type="text" id="servicio_preciototal_cadete" name="servicio_preciototal_cadete[1]" placeholder="0,00" size="10" readonly=""> </td><td><div id="del" class="btn btn-sm btn-danger">Eliminar</div></td></tr></tbody>
					  </table>
<table id="TotalServiciosTablaCadete">
						<thead>
						  <tr>
						  <td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<th>TOTAL $</th>
							<td><div id="TotalServiciosCadete" style="text-align:right;font-weight: bold;">44.80</div></td>
						  </tr>
						
					  </thead></table>
</div>

2 respuestas 2

1

Tu problema esta aqui:

var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;

Este codigo siempre va a ejecutar solo en el tr del elemento que acciona el evento onBlur. Si quieres que se ejecute en las dos tablas tendras que usar otra logica, como por ejemplo usar clases en los elementos tr. Tambien podrias capturar el indice de el tr de una tabla y forzar el trigger de la fila equivalente en la otra tabla.

4
  • Investigando y buscando el modo de resolverlo, intenté por ese lado. Pero, honestamente, no lo pude lograr. Sería algo como var tr = $(this).parent().parent(); var id = tr.attr("id"); var trCadete = $("#TablaCadete").find("#"+ id).ele.parentNode.parentNode; var nodes = trCadete.childNodes;
    – pointup
    Commented el 23 abr. 2018 a las 20:26
  • No puedes utilizar ids porque se supone que deben de ser unicas en todo el DOM. Si quieres seguir intentando por ese lado tendrias que usar clases en lugar de ids.
    – alanfcm
    Commented el 23 abr. 2018 a las 20:28
  • Me temo que no lo puedo lograr. Añadí clases a las tr. Con numeración diferente. Pero no logro definir el parámetro que debe tomar y recibo el error " Cannot read property 'parentNode' of undefined" Si me pudieras ayudar a construirlo, sería fantástico. Sino, veré cómo lo resuelvo. Muchas gracias, de todos modos! var tr = $(this).parent(); var id = tr.attr("calculo["+ cant +"]"); var trServicios = $("#servicio").find("."+ "calculo["+ cant +"]").parentNode.parentNode; var nodes = trServicios.childNodes;
    – pointup
    Commented el 23 abr. 2018 a las 20:53
  • La idea es añadir clases iguales a la filas. Entonces a la primera fila vas a añadir la clase "fila1" en las dos tablas. A la fila 2 la clase "fila2" en las 2 tablas y asi sucesivamente. Luego para agarrar las 2 filas con jquery lo harias asi: var clase = $(this).parent().attr('class'); y luego para seleccionar todas las filas con esa clase asi: var trs = $("."+clase);
    – alanfcm
    Commented el 23 abr. 2018 a las 21:27
-1

usa el evento onblur y obten el valor asi $(this).val() te dejo el ejemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
  <td><input type="text" id="input1"  onblur="miFuncion($(this).val());"> </td>
</tr>
</table>

<table border="1">
<tr>
  <td><input type="text" id="input2"  onblur="miFuncion($(this).val());"> </td>
</tr>
</table>
<script>
function miFuncion(valor){
alert(valor);
}
</script>

Te dejo el link probado !! Link Probado

1
  • Esto no responde a la pregunta
    – alanfcm
    Commented el 23 abr. 2018 a las 20:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.