es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Suma de Datos en Filas Dinámicas de Codeigniter

17 Jun, 2023 Programación

Tengo una función “agregar más” dentro de un formulario en Codeigniter. Simplemente me gustaría mostrar un total acumulado a medida que las personas agregan datos en cada fila agregada.

Cuando agrego números en la primera fila, todo funciona correctamente y el número que escribí aparece en la celda “TOTAL”.

Mi problema es que cuando hago clic en “agregar más” y agrego datos en filas adicionales, la fórmula no suma los datos de todas las filas.

SIN EMBARGO … digamos que hago clic en “agregar más” 3 veces (lo que me da un total de 4 filas), si coloco datos en las nuevas filas PRIMERO … y luego agrego datos en la fila superior (original) al final … ENTONCES la fórmula sumará los datos de todas las celdas de esa columna.

FORMULARIO DE “AGREGAR MÁS” DE EJEMPLO

SUBCONTRACTOR TOTAL PRUEBAS TOTAL DIAGNOSTICADAS AGREGAR MÁS
Entrada 1 5 9 remover
Entrada 2 3 1 remover
Entry 3 2 4 remover
TOTAL 10 14 remover

SCRIPT DE COLUMNAS DE AGREGAR

$( document ).ready( function() {

$( ‘[id^=nonclinsub]’ ).on( ‘keyup’, function() {
var total = 0;

$(‘[id^=nonclinsub]’).each(function(index){
total += parseFloat($(this).val()?$(this).val():0);
});

var totalAll = $( ‘#amt_nonclinsub_1’ ).val(total.toFixed(0));
});

$( ‘[id^=subdx]’ ).on( ‘keyup’, function() {
var total = 0;

$(‘[id^=subdx]’).each(function(index){
total += parseFloat($(this).val()?$(this).val():0);
});

var totalAll = $( ‘#amt_subdx_2

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar un total en tiempo real mientras las personas agregan datos en cada nueva fila añadida dentro de una función “agregar más” dentro de un formulario en Codeigniter, puedes modificar el script existente para incluir lo siguiente:

    1. Asignar una clase a cada campo de ingreso de datos que debe ser incluido en el cálculo del total, por ejemplo, “cantidad_non_clin”. Asegúrate de que esta clase se aplique a todos los campos de entrada, incluyendo el original y cualquier fila adicional.

    2. Modificar el script existente para incluir una función que calcule el monto total cada vez que se cambie algún campo de ingreso de datos con la clase “cantidad_non_clin”. Esto se puede hacer usando los métodos “on” y “each” para iterar a través de todos los campos de entrada con esa clase y sumar sus valores. Luego, el valor total se puede asignar al atributo “valor” del campo de entrada “TOTALES”.

    Aquí hay un ejemplo de cómo podría verse el script modificado:

    <script>
$(document).ready(function(){ 

// función para calcular el monto total
function calculateTotal() {
  var total = 0;

  $('.cantidad_non_clin').each(function(index) {
    total += parseFloat($(this).val() || 0);
  });

  $('#amt_nonclinsub_1').val(total.toFixed(0));
}

// vincular evento de tecla pulsada a todos los campos de entrada con clase "cantidad_non_clin"
$(document).on('keyup', '.cantidad_non_clin', function() {
  calculateTotal();
});

// vincular evento de clic al botón "agregar más"
$('#add_ncs').click(function() {
  // las filas agregadas dinámicamente también deben tener la clase "cantidad_non_clin"
  calculateTotal();
});

});
</script>

    Ten en cuenta que el script modificado utiliza la delegación de eventos para manejar los eventos “keyup” y “click” en filas añadidas dinámicamente, así como en la fila original. Esto significa que los escuchas de eventos se aplican a un elemento padre que ya existe en la página (en este caso, todo el documento), y seguirán funcionando incluso si se agregan nuevos elementos dinámicamente más adelante.

    También ten en cuenta que el ejemplo supone que el campo de entrada “TOTALES” tiene un ID de “amt_nonclinsub_1”. Si este no es el caso, debes modificar el script en consecuencia.

Comments are closed.