execute script function in the corresponding box

0

My question is when I add another row of fields when I put the numbers in the boxes in the row below I take the result in the row above

<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>

Function that increases row

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.");  

    }   
}
    
asked by emmanuel gomez toledo 06.12.2018 в 18:01
source

1 answer

0

The first thing you need is that each row of the table has a unique id. For this you can use the function elementoHTML.setAttribute('id', 'el id que quieras poner') , like this:

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

The attributes id of html must be unique, that is, there must not be two html elements (of whatever type) that have the same id within the same page. In this case, by assigning id with value 'row_' + rowCount you guarantee that the id of the row will be different depending on the order in which it appears.

Keep an eye on ids, anyway, because when copying elements from one row to another with

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

You are copying the <input> element that you have inside each one with all its attributes and if you have ids in the <input> of the first row, as is the case, you will be copying those in the row that inserted. This can lead to problems later if you try to select with jquery, getElemetById , or querySelector , an element <input> concrete.

Now, for multi() to do what you want, you need to receive the id of the row over which you have to operate. That's why you need to modify the attributes onKeyUp to send that id. You can do it this way:

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

I omit the other attributes that you have in your code for clarity. Notice that the "father" of this input is cell <td> ( this.parentNode ) and that's why we have to do this.parentNode.parentNode to get the id of "grandfather" that would be the <tr> that interests you.

Now in the multi function () you will be receiving that id as a parameter, so you can modify it in this way, so that it takes the data from the row that the user is editing:

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

But we still have not finished because as I said, the ids must be unique so that what you do in the last line of multi() , change the value of the cell corresponding to the cost, really works. You could do something similar to what I explain above with the rows to change the input id that interests you when you generate the row, but that is more convoluted to change the getElementById() by querySelector() . So I would change that input element of the original row so that 'Costo' was in its attribute class (because class does not need to be unique). So:

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

and then multi() would be this way:

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

As you see, it is very important that your js and html are designed for each other and you have to take care of how you put the attributes of the html elements when you intend to work with the DOM from javascript.

    
answered by 11.12.2018 / 22:09
source