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>