MULTIPLY AND ADD

Question

MULTIPLY AND ADD

Navigation

#1 by (3 votes)

1

I have the following table a column with established values and another column with the result of the multiplication of the values, and at the end of the table I have a cell which is the sum of the multiplication results ... I have tried in several ways, however I do not get success with the sum .. could help me ... is j-query

<table border="1">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>Resultado</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>Suma de Resultado</td>
                <td></td>
            </tr>
        </tbody>
    </table>

javascript jquery

asked by jehs 11.01.2018 в 22:35

source

1 answer

Show image from stored route with PHP What is the difference between a failfast iterator and failsafe in JAVA?

score 3 · Accepted Answer

You should execute a function by changing the value of any input that recalculates the last cell in the row and calls recalculate the total amount.

For the total sum it would be enough to go through the rows with value in the first and last cells and add the value of the last one.

Here is an example discussed in each step:

$(function(){
  $('input').change(function(){
    // Tomamos el valor
    let value = parseInt($(this).val());
    // Seleccionamos la fila    
    let $fila = $(this).parents('tr');
    // Tomamos el valor de la primera celda
    let primera = parseInt($fila.find('td:first').text());
    // Calculamos la multiplicación
    let result = isNaN(value) ? ''
      : (value * primera);
    // Establecemos el contenido de la última celda
    $fila.find('td:last').text(result);
    // Recalculamos total
    recalcularTotal();
  });
  
  function recalcularTotal(){
    var total = 0;
    // Recorremos todas las filas
    $('tr').each(function(i, e){
      // Si la primera y última celdas tienen valor
      if ($(e).find('td:first').text()
            && $(e).find('td:last').text()){
        // Sumamos el valor de la última al total
        total += parseInt($(e).find('td:last').text());
      }
    });
    // Establecemos el valor de la celda resultado
    $('tr:last').find('td:last').text(total);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>Resultado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><input type="text"></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td><input type="text"></td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td><input type="text"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>Suma de Resultado</td>
            <td></td>
        </tr>
    </tbody>
</table>