2

Tengo esta tabla : el objetivo es multiplicar valor1(primer columna) y valor2(segunda columna) y el resultado (tercer columna), el después sumar cada uno de los resultados.

<table border="1">
            <thead>
                <tr>
                    <th>Valor1</th>
                    <th>Valor2</th>
                    <th>Valor1*valor2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td></td>
                    <td>Sumar de :</td>
                    <td> 18</td>
                </tr>
            </tbody>
        </table>

1 respuesta 1

2

Si modificamos levemente tu tabla para estructurarla convenientemente con <thead>/<tdata>/<tfoot> se puede simplificar el trabajo de la siguiente manera:

  • Si el primer y el segundo valor son numéricos (no son NaN) y existe una tercera columna, calculamos el producto y mostramos el resultado en ella.
  • Acumulamos los resultados parciales para mostrarlos en la tercera columna del pie (si existe).

PD: Hacer el trabajo con o sin jQuery es prácticamente lo mismo.

Implementación sin jQuery:

var total = 0.;
/* Localizamos las filas de datos */
var filas = document.querySelectorAll('table tbody tr');
/* Por cada fila sumamos los datos de la primera y segunda columna */
filas.forEach(function (valor, indice) {
  /* Localizamos las celdas de datos */
  var celdas = valor.querySelectorAll('td');
  /* Si son valores numéricos y existe la tercera columna */
  if (
    ! isNaN(celdas[0].innerText)
  &&
    ! isNaN(celdas[1].innerText)
  &&
    celdas[2] !== undefined
  ) {
    /* Calculamos el producto, mostramos el resultado y lo agregamos al total */
    var suma = parseFloat(celdas[0].innerText) * parseFloat(celdas[1].innerText);
    celdas[2].innerText = suma;
    total += suma;
  }
});
/* Mostramos la salida */
var pie = document.querySelectorAll('table tfoot td');
if (pie[2] !== undefined) {
  pie[2].innerText = total;
}
<table border="1">
  <thead>
    <tr>
        <th>Valor1</th>
        <th>Valor2</th>
        <th>Valor1*valor2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td></td>
        <td>Suma:</td>
        <td>18</td>
    </tr>
  </tfoot>
</table>

Implementación con jQuery:

var total = 0.;
/* Localizamos las filas de datos */
var filas = $('table tbody tr');
/* Por cada fila sumamos los datos de la primera y segunda columna */
filas.each(function (indice) {
  /* Localizamos las celdas de datos */
  var celdas = $( this ).find('td');
  /* Si son valores numéricos y existe la tercera columna */
  if (
    ! isNaN(celdas[0].innerText)
  &&
    ! isNaN(celdas[1].innerText)
  &&
    celdas[2] !== undefined
  ) {
    /* Calculamos el producto, mostramos el resultado y lo agregamos al total */
    var suma = parseFloat(celdas[0].innerText) * parseFloat(celdas[1].innerText);
    celdas[2].innerText = suma;
    total += suma;
  }
});
/* Mostramos la salida */
var pie = $('table tfoot td');
if (pie[2] !== undefined) {
  pie[2].innerText = total;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<table border="1">
  <thead>
    <tr>
        <th>Valor1</th>
        <th>Valor2</th>
        <th>Valor1*valor2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td></td>
        <td>Suma:</td>
        <td>18</td>
    </tr>
  </tfoot>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.