2

Como puedo sumar todos los valores de cada columna y mostrar su total debajo (en su celda respectiva de totales) utilizando jQuery o JavaScript?

Los datos los estoy obteniendo dinamicamente con laravel.

Esta es la tabla en la pagina:

introducir la descripción de la imagen aquí

Esta es mi tabla html:

<table class="table text-center table-width mb-0" id="carterasDatas">
    <thead>
        <th>Id</th>
        <th>Nombre</th>
        <th>Departamento</th>
        <th>Municipio</th>
        <th>Capital Invertido</th>
        <th>Capital+Interés</th>
        <th>Total Amortización</th>
        <th>Total Saldo</th>
        <th>Opciones</th>
    </thead>

    <tbody>
        @foreach ($carteras as $cartera)
        <tr class="dataColumn">
            <td>{{$cartera->id}}</td>
            <td>{{$cartera->name}}</td>
            <td>{{$cartera->depto}}</td>
            <td>{{$cartera->municipio}}</td>

            //-----------AQUI SE TOMAN LAS CANTIDADES------------
            <td class="amountCartera">Q{{$cartera->monto}}</td>
            <td class="amountCartera">Q{{$cartera->montoInteres}}</td>
            <td class="amountCartera">Q{{$cartera->amortizacion}}}</td>
            <td class="amountCartera">Q{{$cartera->saldo}}</td>
            <td>
                <a href="{{route('carteras.show', $cartera->id)}}" class="badge badge-pill badge-success" title="VER CARTERA"><i class="far fa-eye f-18"></i></a>
                <a href="{{route('carteras.edit', $cartera->id)}}" class="badge badge-pill badge-primary" title="EDITAR CARTERA"><i class="far fa-edit f-18"></i></a>
                <a href="" class="badge badge-pill badge-danger" data-toggle="modal" data-target="#carterasModal{{$cartera->id}}" title="ELIMINAR CARTERA"> <i class="fas fa-trash f-18"></i> </a>
            </td>
        </tr>
        @endforeach

        <tr class="totalColumn">
            <td colspan="4"><b>TOTALES</b> </td>
            <td class="total">Q</td>
            <td class="total">Q</td>
            <td class="total">Q</td>
            <td class="total">Q</td>
            <td></td>
        </tr>
    </tbody>
</table>

1
  • Puedes agregarle una clase a las columnas numericas y asi poder seleccionarlas para sumar.
    – alanfcm
    Commented el 15 oct. 2019 a las 15:58

2 respuestas 2

3

Si tus celdas no tienes un id para sumarlas puedes emplear su posición, lo puedes hacer con el siguiente código:

Luego te recomiendo que pongas los totales en un <tfoot> para diferenciarlos de las celdas a sumar en el <tbody>:

  var cinv=0;
  var cint=0;
  var tta=0;
  var tts=0;
  
  function sumar() {
    elementos=[...$('tbody td')];
    for (var i = 0; i < elementos.length; i +=9) {
      cinv+=+elementos[i+4].textContent;
      cint+=+elementos[i+5].textContent;
      tta+=+elementos[i+6].textContent;
      tts+=+elementos[i+7].textContent;
    }
    totales = [...$('tfoot td')];
    totales[1].textContent=cinv;
    totales[2].textContent=cint;
    totales[3].textContent=tta;
    totales[4].textContent=tts;
  }
  
  sumar();
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-center table-width mb-0" border=1 id="carterasDatas">
<thead>
    <th>Id</th>
    <th>Nombre</th>
    <th>Departamento</th>
    <th>Municipio</th>
    <th>Capital Invertido</th>
    <th>Capital+Interés</th>
    <th>Total Amortización</th>
    <th>Total Saldo</th>
    <th>Opciones</th>
</thead>

<tbody>
    @foreach ($carteras as $cartera)
    <tr>
        <td>{{$cartera->id}}</td>
        <td>{{$cartera->name}}</td>
        <td>{{$cartera->depto}}</td>
        <td>{{$cartera->municipio}}</td>

        //-----------AQUI SE TOMAN LAS CANTIDADES------------
        <td>200</td>
        <td>300</td>
        <td>500</td>
        <td>400</td>
        <td>
            <a href="{{route('carteras.show', $cartera->id)}}" class="badge badge-pill badge-success" title="VER CARTERA"><i class="far fa-eye f-18"></i></a>
            <a href="{{route('carteras.edit', $cartera->id)}}" class="badge badge-pill badge-primary" title="EDITAR CARTERA"><i class="far fa-edit f-18"></i></a>
            <a href="" class="badge badge-pill badge-danger" data-toggle="modal" data-target="#carterasModal{{$cartera->id}}" title="ELIMINAR CARTERA"> <i class="fas fa-trash f-18"></i> </a>
        </td>
    </tr>
    <tr>
        <td>{{$cartera->id}}</td>
        <td>{{$cartera->name}}</td>
        <td>{{$cartera->depto}}</td>
        <td>{{$cartera->municipio}}</td>

        //-----------AQUI SE TOMAN LAS CANTIDADES------------
        <td>200</td>
        <td>300</td>
        <td>500</td>
        <td>400</td>
        <td>
            <a href="{{route('carteras.show', $cartera->id)}}" class="badge badge-pill badge-success" title="VER CARTERA"><i class="far fa-eye f-18"></i></a>
            <a href="{{route('carteras.edit', $cartera->id)}}" class="badge badge-pill badge-primary" title="EDITAR CARTERA"><i class="far fa-edit f-18"></i></a>
            <a href="" class="badge badge-pill badge-danger" data-toggle="modal" data-target="#carterasModal{{$cartera->id}}" title="ELIMINAR CARTERA"> <i class="fas fa-trash f-18"></i> </a>
        </td>
    </tr>
    @endforeach
</tbody>
<tfoot>
    <tr class="totalColumn">
        <td colspan="4"><b>TOTALES</b> </td>
        <td class="total">Q</td>
        <td class="total">Q</td>
        <td class="total">Q</td>
        <td class="total">Q</td>
        <td></td>
    </tr>
</tfoot>

Este es solo un ejemplo, si solo usas la parte de JQuery te funcionará igual.

Espero sea lo que buscas, saludos.

2

Utilizando jQuery lo podrías hacer de la siguiente forma:

var totalMonto = 0;
var totalInteres = 0;
var totalAmortizacion = 0;
var totalSaldo = 0;

  $("#carterasDatas tbody tr").each(function(){
     
     totalMonto = parseFloat($(this).find("td").eq(4).html()) + totalMonto ;
     totalInteres = parseFloat($(this).find("td").eq(5).html()) + totalInteres;
     totalAmortizacion = parseFloat($(this).find("td").eq(6).html()) + totalAmortizacion;
     totalSaldo = parseFloat($(this).find("td").eq(7).html()) + totalSaldo;
     
  })
  
  $("#carterasDatas tfoot tr").first().find("td").eq(1).html("Q" + totalMonto);
  $("#carterasDatas tfoot tr").first().find("td").eq(2).html("Q" + totalInteres);
  $("#carterasDatas tfoot tr").first().find("td").eq(3).html("Q" + totalAmortizacion);
  $("#carterasDatas tfoot tr").first().find("td").eq(4).html("Q" + totalSaldo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-center table-width mb-0" id="carterasDatas">
    <thead>
        <th>Id</th>
        <th>Nombre</th>
        <th>Departamento</th>
        <th>Municipio</th>
        <th>Capital Invertido</th>
        <th>Capital+Interés</th>
        <th>Total Amortización</th>
        <th>Total Saldo</th>
        <th>Opciones</th>
    </thead>

    <tbody>
  
        <tr class="dataColumn">
            <td>1</td>
            <td>Nombre 1</td>
            <td>Departamento 1</td>
            <td>Municipio 1</td>

            //-----------AQUI SE TOMAN LAS CANTIDADES------------
            <td class="amountCartera">100</td>
            <td class="amountCartera">20</td>
            <td class="amountCartera">50</td>
            <td class="amountCartera">30</td>
            <td></td>
        </tr>
        
        <tr class="dataColumn">
            <td>2</td>
            <td>Nombre 2</td>
            <td>Departamento 2</td>
            <td>Municipio 2</td>

            //-----------AQUI SE TOMAN LAS CANTIDADES------------
            <td class="amountCartera">50</td>
            <td class="amountCartera">10</td>
            <td class="amountCartera">30</td>
            <td class="amountCartera">40</td>
            <td></td>
        </tr>
        
              <tr class="dataColumn">
            <td>3</td>
            <td>Nombre 3</td>
            <td>Departamento 3</td>
            <td>Municipio 3</td>

            //-----------AQUI SE TOMAN LAS CANTIDADES------------
            <td class="amountCartera">200</td>
            <td class="amountCartera">80</td>
            <td class="amountCartera">50</td>
            <td class="amountCartera">60</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr class="totalColumn">
            <td colspan="4"><b>TOTALES</b> </td>
            <td class="total">Q</td>
            <td class="total">Q</td>
            <td class="total">Q</td>
            <td class="total">Q</td>
            <td></td>
        </tr>
    </tfoot>
</table>

Básicamente estarías recorriendo cada fila del tbody o cuerpo de la tabla mediante la función each(), luego para cada fila, encuentras la columna utilizando la función find() y luego como cada fila tiene varias columnas utilizas la función eq() para especificar la columna donde se encuentra el valor que deseas sumar (pasandole a la función eq() el indice de la columna específica).

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.