2

Tan solo quisiera saber como poder sumarle las columnas, ya que soy nuevo y desearía saber como aplicarlo con java script.

Esta es mi función:

<table id="tabla" class="table" style="width:51%;">   
    
     <thead>
      <tr>
        <th>letras</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <Th>E</Th>
         <Th>F</Th>
          <Th>H</Th>
      </tr>
       <tr>
    <td id="f1">a</td>
    <td id="f2" >1</td>
    <td id="f2">2</td>
    <td id="f2">3</td>
    <td id="f2">4</td>
    <td id="f2">5</td>
    <td id="f2">6</td>
    <td id="f2">7</td>
    </tr>

    <tr>
    <td id="f1">b</td>
    <td id="f2">1</td>
    <td id="f2">2</td>
    <td id="f2">3</td>
    <td id="f2">4</td>
    <td id="f2">5</td>
    <td id="f2">6</td>
    <td id="f2">7</td>
    </tr>

    <tr>  
    <td id="f1">c</td>
    <td id="f2">1</td>
    <td id="f2">2</td>
    <td id="f2">3</td>
    <td id="f2">4</td>
    <td id="f2">5</td>
    <td id="f2">6</td>
    <td id="f2">7</td>
    </tr>

     <tr>
      <td >su total:</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
     </tr>
     
     </thead>
  </table>

1
  • 1
    Ya te dieron la respuesta, solo quiero recalcar algo en tu codigo, cuando uses el id este tiene que ser un identificador unico, no puedes repetir id para nombrar mas de un elemento.
    – Alvarez
    Commented el 29 ago. 2017 a las 22:24

3 respuestas 3

4

Puedes usar Jquery para recorrer las filas e ir acumulando la cantidad por columna

Esta es mi función:

$(document).ready(function() {

 CalcularTotal();

});
function CalcularTotal()
{
var totals = [0, 0, 0, 0, 0, 0, 0, 0];
 var $filas= $("#tabla tr:not('.total, .encabezado')");

  $filas.each(function() {
    $(this).find('td').each(function(i) {
      if (i != 0)
        totals[i - 1] += parseInt($(this).html());
    });
  });
  $(".total td").each(function(i) {
    if (i != 0)
      $(this).html(totals[i - 1]);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla" class="table" style="width:51%;">

  <thead>
    <tr class="encabezado">
      <th>letras</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>H</th>
    </tr>
    <tr>
      <td id="f1">a</td>
      <td id="f2">1</td>
      <td id="f2">2</td>
      <td id="f2">3</td>
      <td id="f2">4</td>
      <td id="f2">5</td>
      <td id="f2">6</td>
      <td id="f2">7</td>
    </tr>

    <tr>
      <td id="f1">b</td>
      <td id="f2">1</td>
      <td id="f2">2</td>
      <td id="f2">3</td>
      <td id="f2">4</td>
      <td id="f2">5</td>
      <td id="f2">6</td>
      <td id="f2">7</td>
    </tr>

    <tr>
      <td id="f1">c</td>
      <td id="f2">1</td>
      <td id="f2">2</td>
      <td id="f2">3</td>
      <td id="f2">4</td>
      <td id="f2">5</td>
      <td id="f2">6</td>
      <td id="f2">7</td>
    </tr>

    <tr class="total">
      <td>su total:</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>

  </thead>
</table>

3
  • Gracias, me ha funcionado!
    – Reinos Ric
    Commented el 30 ago. 2017 a las 16:35
  • Una pregunta @Byron: cuando edito un numero de la fila, no se actualiza la tabla... como hago para que eso funcione?
    – Reinos Ric
    Commented el 30 ago. 2017 a las 17:38
  • @ReinosRic actualice el codigo para encapsular el codigfo en un metodo, cada vez que actualiza la tabla deberias invocar el metodo CalcularTotal();
    – Byron
    Commented el 30 ago. 2017 a las 19:42
3

Explicación

Ya que estás comenzando por este camino del HTML te recomiendo aprender acerca de los Query Selectors y como se pueden usar, en este caso usé una agrupación por clase por cada columna y su correspondiente total.

En el código hice primero una iteración sobre todos los elementos que pertenecen a la clase Total y además de eso con más de 1 clase asignada, esta segunda clase la usaremos para identificar todas las columnas correspondientes a sumar.

Hacemos el segundo QuerySelector y este nos retornará todos los TD pertenecientes a la clase Columna+letra convertirá su contenido de string a entero y lo sumará en una variable.

finalmente esta suma la establecerá a la celda que está iterando el primer for.

Espero que sea de ayuda mi respuesta, saludos.

Codigo

document.querySelectorAll('.Total').forEach(function (total) {
        if (total.classList.length > 1) {
            var letra = total.classList[1];
            var suma = 0;
            document.querySelectorAll('.Columna' + letra).forEach(function (celda) {
                var valor = parseInt(celda.innerHTML);
                suma += valor;
            });
            total.innerHTML = suma;
        }
    });
<table id="tabla" class="table" style="width:51%;">
    <thead>
        <tr>
            <th>letras</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <Th>E</Th>
            <Th>F</Th>
            <Th>H</Th>
        </tr>
        <tr>
            <td class="ColumnaLetra">a</td>
            <td class="ColumnaA">1</td>
            <td class="ColumnaB">2</td>
            <td class="ColumnaC">3</td>
            <td class="ColumnaD">4</td>
            <td class="ColumnaE">5</td>
            <td class="ColumnaF">6</td>
            <td class="ColumnaG">7</td>
        </tr>
        <tr>
            <td class="ColumnaLetra">b</td>
            <td class="ColumnaA">1</td>
            <td class="ColumnaB">2</td>
            <td class="ColumnaC">3</td>
            <td class="ColumnaD">4</td>
            <td class="ColumnaE">5</td>
            <td class="ColumnaF">6</td>
            <td class="ColumnaG">7</td>
        </tr>
        <tr>
            <td class="ColumnaLetra">c</td>
            <td class="ColumnaA">1</td>
            <td class="ColumnaB">2</td>
            <td class="ColumnaC">3</td>
            <td class="ColumnaD">4</td>
            <td class="ColumnaE">5</td>
            <td class="ColumnaF">6</td>
            <td class="ColumnaG">7</td>
        </tr>

        

        <tr>
            <td class="Total">Su total</td>
            <td class="Total A"></td>
            <td class="Total B"></td>
            <td class="Total C"></td>
            <td class="Total D"></td>
            <td class="Total E"></td>
            <td class="Total F"></td>
            <td class="Total G"></td>
        </tr>

    </thead>
</table>

Referencias

Te invito a que te documentes con la siguiente referencia: https://www.w3schools.com/cssref/css_selectors.asp

0

Una forma rápida es usar Jquery, incluyelo en el <head>:

agregamos unas class a los <tr> para seleccionarlos mas rapido. El codigo quedaria:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var totalA=0;
        var totalB=0;
        //repetir por columna, o usa un array
        $('.suma').map(function(k,v){
            totalA=totalA+parseInt($(this).children('td:eq(1)').text());
            totalB=totalB+parseInt($(this).children('td:eq(2)').text());
            //repetir por columna o llena un array
        })
        $('.total').children('td:eq(1)').text(totalA);
        $('.total').children('td:eq(2)').text(totalB);
    });
</script>
</head>
<body>
<table id="tabla" class="table" style="width:51%;">       
<thead>
<tr>
<th>letras</th>
<th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <Th>E</Th>
     <Th>F</Th>
      <Th>H</Th>
   </tr>
   </thead>
   <tr class="suma">
<td id="f1">a</td>
<td id="f2" >1</td>
<td id="f2">2</td>
<td id="f2">3</td>
<td id="f2">4</td>
<td id="f2">5</td>
<td id="f2">6</td>
<td id="f2">7</td>
</tr>

<tr class="suma">
<td id="f1">b</td>
<td id="f2">1</td>
<td id="f2">2</td>
<td id="f2">3</td>
<td id="f2">4</td>
<td id="f2">5</td>
<td id="f2">6</td>
<td id="f2">7</td>
</tr>

<tr class="suma">  
<td id="f1">c</td>
<td id="f2">1</td>
<td id="f2">2</td>
<td id="f2">3</td>
<td id="f2">4</td>
<td id="f2">5</td>
<td id="f2">6</td>
<td id="f2">7</td>
</tr>

 <tr class="total">
  <td >su total:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
 </tr>

 </thead>

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.