0

Mi duda es cuando agrego otra fila de campos cuando pongo los numeros en las casillas de la fila de abajo me toma el resultado en la fila de arriba

introducir la descripción de la imagen aquí

<script>
 function multi(){    
                var total = 1;    
                var change= false; //    
                $(".monto").each(function(){    
                if (!isNaN(parseFloat($(this).val()))) {    
                    change= true;    
                    total *= parseFloat($(this).val());    
                }  
            });  

            // Si se modifico el valor , retornamos la multiplicación  
            // caso contrario 0  
            total = (change)? total:0;  
            document.getElementById('Costo').value = total;  
         }  
 </script>  


 <tbody id="dataTable">
                <tr>
                    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                    <td>
                        <input type="text" class="form-control" required="required" name="BX_NAME[]">
                     </td>
                     <td>
                        <input type="text" required="required" class="form-control"   name="BX_age[]">
                     </td>
                     <td>
                        <input type="text" class=" monto form-control" placeholder="Cantidad" required="required" onkeyup="multi()" name="BX_gender[]">
                     </td>
                     <td>
                        <input type="text" required="required" class=" monto form-control"  placeholder="Unitario" onkeyup="multi()" name="BX_birth[]">
                     </td>
                     <td>
                        <input type="text" class="form-control" id="Costo" required="required" name="BX_NAM[]">
                     </td>
                     <td>
                        <input type="text" required="required" class="form-control"   name="BX_ag[]">
                     </td>
                     <td>
                        <input type="text" class="form-control" required="required" name="BX_NAM[]">
                     </td>
                    </tr>
                </tbody>
            </table>

Función que incrementa la fila

function addRow(tableID) {  
    var table = document.getElementById(tableID);  
    var rowCount = table.rows.length;     
    if(rowCount < 5){                           // limit the user from creating fields more than your limits  
        var row = table.insertRow(rowCount);   
        var colCount = table.rows[0].cells.length;  
        for(var i=0; i<colCount; i++) {  
            var newcell = row.insertCell(i);   
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;   
        }   
    }else{   
         alert("Solo puedes agregar 5 productos.");  

    }   
}

1 respuesta 1

0

Lo primero que necesitas es que cada fila de la tabla tenga un id único. Para esto puedes utilizar la función elementoHTML.setAttribute('id', 'el id que quieras poner'), de este modo:

function addRow(tableID) {  
    var table = document.getElementById(tableID);  
    var rowCount = table.rows.length;     
    if(rowCount < 5){                           
        var row = table.insertRow(rowCount);
        row.setAttribute('id', 'row_' + rowCount);
        // ...
}

Los atributos id de html deben ser únicos, es decir no debe haber dos elementos html (sean del tipo que sean) que tengan el mismo id dentro de la misma página. En este caso al estar asignando id con valor 'row_' + rowCount te garantizas que el id de la fila sea diferente dependiendo del orden en el que aparece.

Vigila esto de los ids, de todos modos, porque al copiar elementos de una fila a otra con

var colCount = table.rows[0].cells.length;  
for(var i=0; i<colCount; i++) {  
    var newcell = row.insertCell(i);   
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;   
}   

Estás copiando el elemento <input> que tienes dentro de cada una con todos sus atributos y si tienes ids en los <input> de la primera fila, como es el caso, los vas a estar copiando a los de la fila que insertas. Esto te puede provocar problemas después si intentas seleccionar con jquery, getElemetById, o querySelector, un elemento <input> concreto.

Ahora, para que multi() haga lo que quieres necesitas que reciba el id de la fila sobre la que tiene que operar. Por eso necesitas modificar los atributos onKeyUp para que manden ese id. Lo puedes hacer de esta manera:

<!-- ... -->
<tr id='row_2'>
    <!-- ... -->
    <td>
        <input type="text"  onkeyup="multi(this.parentNode.parentNode.id)" >
    </td>
    <!-- ... -->
</tr>
<!-- ... -->

Omito los otros atributos que tienes en tu código por claridad. Fíjate en que el "padre" de este input es la celda <td>(this.parentNode) y por eso tenemos que hacer this.parentNode.parentNode para obtener el id del "abuelo" que sería el <tr> que te interesa.

Ahora en la función multi() estarás recibiendo ese id como parámetro, así que la puedes modificar de esta manera, para que coja los datos de la fila que esté editando el usuario:

function multi(rowId){    
    var total = 1;    
    var change= false; //    
    $("#" + rowId + " .monto").each(function(){    
       //...
    });
    // ...
}  

Pero todavía no hemos acabado porque como te decía, los ids deben ser únicos para que lo que haces en la última línea de multi(), cambiar el valor de la celda correspondiente al costo, realmente funcione. Podrías hacer algo parecido a lo que te explico más arriba con las filas para cambiar el id del input que te interesa cuando generas la fila, pero eso es más enrevesado cambiar el getElementById() por querySelector(). Así que yo cambiaría ese elemento input de la fila original de forma que 'Costo' estuviera en su atributo class (porque class no necesita ser único). Así:

<!-- ... -->
<td>
    <input type="text" class="form-control Costo" required="required" name="BX_NAM[]"> 
</td>
<!-- ... -->

y entonces multi() quedaría de esta manera:

function multi(rowId){    
    var total = 1;    
    var change= false; //    
    $("#" + rowId + " .monto").each(function(){    
        if (!isNaN(parseFloat($(this).val()))) {    
            change= true;    
            total *= parseFloat($(this).val());    
        }  
    });  

    // Si se modifico el valor , retornamos la multiplicación  
    // caso contrario 0  
    total = (change)? total:0;  
    document.querySelector('#' + rowId + ' .Costo').value = total;  
}  

Como ves, es muy importante que tu js y html estén pensados el uno para el otro y hay que cuidar bastante como pones los atributos de los elementos html cuando pretendes trabajar con el DOM desde javascript.

13
  • Te comparto el código con el cual estoy generando las filas Commented el 13 dic. 2018 a las 0:25
  • Ok, pero no lo hagas como respuesta, edita la pregunta y ponlo ahí, para que otros usuarios que puedan tener el mismo problema lo identifiquen claramente.
    – Glantucan
    Commented el 13 dic. 2018 a las 7:42
  • Con respecto a esta linea row.setAttribute(id, 'row_' + rowCount); cuando lo coloco ya no me crea la siguiente fila. Commented el 18 dic. 2018 a las 16:19
  • Perdona, es que es row.setAttribute('id', 'row_' + rowCount); Lo acabo de corregir, 'id' es el nombre del atributo que quieres añadir y por eso ha de ser una cadena de texto.
    – Glantucan
    Commented el 18 dic. 2018 a las 16:25
  • ¿Conseguiste hacerlo funcionar?
    – Glantucan
    Commented el 18 dic. 2018 a las 20:24

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.