3

Tengo que aclarar que las columnas contienen espacios vacíos ya que hay una columna para Banco y otra Efectivo, por lo tanto cuando se paga o cobra por banco no se llena la columna efectivo, quizás esta dando error por eso... también necesito que reste las que son salidas de dinero y sume las que son entrada del mismo, paso el código a continuación y una captura de la vista en la web... desde ya muchas gracias!

Acá el código JS que esta al final de la vista, lo encontre aca en stack overflow, utiliza jquery y va sumando y concatentando valores de las columnas de la tabla:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    //Ejecuto la función al cargar la página
    $(document).ready(function () {

        var total_col3 = 0;
        var total_col4 = 0;
        $('#tablaCaja tbody').find('tr').each(function (i, el) {
            total_col3 += parseFloat($(this).find('td').eq(3).text());
            total_col4 += parseFloat($(this).find('td').eq(4).text());
        });
        $('#tablaCaja tfoot tr th').eq(3).text("Total: " + total_col3);
        $('#tablaCaja tfoot tr th').eq(4).text("Total: " + total_col4);
    });
</script>

Aqui tengo el codigo de la tabla, le puse correctamente la ID, y dividi head body y foot para usar los totales en el foot, tal cual explicaba el metodo del script.
<table id="tablaCaja" class="table table-striped table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Fecha)
            </th>
            <th>
                Transaccion
            </th>
            <th>
                Inmueble
            </th>

            <th>
                Efectivo
            </th>

            <th>
                Banco
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Observaciones)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in Model)
        {



            var badgeClass = item.esIngreso == true
                       ? "success"
                       : "danger";

            <tr class="@badgeClass">
                <td>
                    @Html.DisplayFor(modelItem => item.Fecha)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.concepto.Descripcion)
                </td>

                <td>
                    @if (item.ConceptoFK != 5)
                    {
                        @Html.DisplayFor(modelItem => item.inmueble_Referencia.Calle) @Html.Raw(" ") @Html.DisplayFor(modelItem => item.inmueble_Referencia.Altura) @Html.Raw(" ") @Html.DisplayFor(modelItem => item.inmueble_Referencia.NroPiso) @Html.Raw(" ") @Html.DisplayFor(modelItem => item.inmueble_Referencia.Departamento)
                    }
                </td>

                @if (item.esEfectivo == true)
                {
                    <td>
                        @Html.DisplayFor(modelItem => item.MontoTotal)
                    </td>
                }
                else
                {
                    <td></td>
                }

                @if (item.esEfectivo == false)
                {
                    <td>
                        @Html.DisplayFor(modelItem => item.MontoTotal)
                    </td>
                }
                else
                {
                    <td></td>
                }
                <td>
                    @Html.DisplayFor(modelItem => item.Observaciones)
                </td>
                <td>
                    @Html.ActionLink(" ", "Details", new { id = item.ID }, new { @class = "btn btn-primary fa fa-folder btn-sm", title = "Detalles" })
                </td>
            </tr>
        }

    </tbody>
    <tfoot>
        <tr class="total">
            <th></th>
            <th></th>
            <th></th>
            <th>total_col3</th>
            <th>total_col4</th>
        </tr>
    </tfoot>
</table>

Aca la porcion final de la tabla con los Totales no ejecutándose bien, como ven, algunas filas se llenan con espacio vacio y otras con negativos o positivos, aunque no tiene el signo

Añado al final el codigo html del body:

<tbody>

        @foreach (var item in Model)
        {



            var badgeClass = item.esIngreso == true
                       ? "success"
                       : "danger";

            <tr class="@badgeClass">
                <td>
                    @Html.DisplayFor(modelItem => item.Fecha)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.concepto.Descripcion)
                </td>

                <td>
                    @if (item.ConceptoFK != 5)
                    {
                        @Html.DisplayFor(modelItem => item.inmueble_Referencia.Calle) @Html.Raw(" ") @Html.DisplayFor(modelItem => item.inmueble_Referencia.Altura) @Html.Raw(" ") @Html.DisplayFor(modelItem => item.inmueble_Referencia.NroPiso) @Html.Raw(" ") @Html.DisplayFor(modelItem => item.inmueble_Referencia.Departamento)
                    }
                </td>

                @if (item.esEfectivo == true)
                {
                    <td>
                        @Html.DisplayFor(modelItem => item.MontoTotal)
                    </td>
                }
                else
                {
                    <td></td>
                }

                @if (item.esEfectivo == false)
                {
                    <td>
                        @Html.DisplayFor(modelItem => item.MontoTotal)
                    </td>
                }
                else
                {
                    <td></td>
                }
                <td>
                    @Html.DisplayFor(modelItem => item.Observaciones)
                </td>
                <td>
                    @Html.ActionLink(" ", "Details", new { id = item.ID }, new { @class = "btn btn-primary fa fa-folder btn-sm", title = "Detalles" })
                </td>
            </tr>
        }

    </tbody>

2 respuestas 2

5

Una posible forma es usar .reduce para sumar y algo como (+c.innerText.replace(/,/,".") || 0) para que intente transformar a número los textos del td y sino que asigne 0;

const sumaBanco = [...$("td:nth-child(5)")].reduce((p,c)=>p+(+c.innerText.replace(/,/,".") || 0),0);
const sumaEfectivo = [...$("td:nth-child(4)")].reduce((p,c)=>p+(+c.innerText.replace(/,/,".") || 0),0);

$(".total th:nth-child(5)").text(sumaBanco+"".replace(/./,","));
$(".total th:nth-child(4)").text(sumaEfectivo+"".replace(/./,","));
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<table id="tablaCaja" class="table table-striped table-bordered table-condensed table-hover">
  <thead>
    <tr>
      <th>fecha</th>
      <th>Transaccion</th>
      <th>Inmueble</th>
      <th>Efectivo</th>
      <th>Banco</th>
      <th>observaciones</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="badgeClass">
      <td></td>
      <td></td>
      <td></td>
      <td>120,00</td>
      <td></td>
      <td></td>
    </tr>
    <tr class="badgeClass">
      <td></td>
      <td></td>
      <td></td>
      <td>100,00</td>
      <td></td>
      <td></td>
    </tr>
    <tr class="badgeClass">
      <td></td>
      <td></td>
      <td></td>
      <td>1200,00</td>
      <td></td>
      <td></td>
    </tr>
    <tr class="badgeClass">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>200,05</td>
      <td></td>
    </tr>
    <tr class="badgeClass">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>150,00</td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="total">
      <th></th>
      <td></td>
      <th></th>      
      <th>total_col3</th>
      <th>total_col4</th>
      <th></th>
    </tr>
  </tfoot>
</table>

1
  • 1
    Ah no conocía la función, puede servir!! la voy a probar! mil gracias por tu solución Commented el 21 oct. 2019 a las 3:40
4

El problema puede deberse a que al momento de llamar la función parseFloat() y pasarle una cadena vacía, esta devuelve NaN prueba esto en la consola del navegador y lo comprobarás console.log(parseFloat("")).

Entonces podrías capturar el texto de la columna en otra variable y asignarle cero si la columna está vacía o el valor que está dentro de la columna en caso de no estar vacía, algo así:

$(document).ready(function () {

  var total_col3 = 0;
  var total_col4 = 0;
  $('#tablaCaja tbody').find('tr').each(function (i, el) {
  
    var textColumna3 = $(this).find('td').eq(3).text().trim() == "" ? 0 : $(this).find('td').eq(3).text();

    total_col3 = $(this).hasClass("sumar") ? total_col3 + parseFloat(textColumna3) : total_col3  - parseFloat(textColumna3);
                
    var textoColumna4 = $(this).find('td').eq(4).text().trim() === "" ? 0 : $(this).find('td').eq(4).text();
    total_col4 = $(this).hasClass("sumar") ? total_col4 + parseFloat(textoColumna4) : total_col4 - parseFloat(textoColumna4); 
     
  });
  
  $('#tablaCaja tfoot tr th').eq(3).text("Total: " + total_col3);
  $('#tablaCaja tfoot tr th').eq(4).text("Total: " + total_col4); 
 })
.sumar {
  background-color: #0384fc;
}

.restar {
  background-color: #fc4103;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablaCaja" class="table table-striped table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th> Fecha</th>
            <th> Transaccion</th>
            <th> Inmueble</th>
            <th> Efectivo </th>
            <th> Banco </th>
            <th> Observaciones</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
            <tr class="sumar">
                <td> Fecha 1 </td>
                <td> Descripcion 1</td>
                <td>Inmueble 1</td>
                <td> 100 </td>
                <td> </td>
                <td> Observacion 1 </td>
                <td> Opcion </td>
            </tr>
            
            <tr class="restar">
                <td> Fecha 2 </td>
                <td> Descripcion 2</td>
                <td>Inmueble 2</td>
                <td> </td>
                <td> 80  </td>
                <td> Observacion 2 </td>
                <td> Opcion </td>
            </tr>
            
            <tr class="sumar">
                <td> Fecha 3 </td>
                <td> Descripcion 3</td>
                <td>Inmueble 3</td>
                <td> </td>
                <td> 120  </td>
                <td> Observacion 3 </td>
                <td> Opcion </td>
            </tr>
            
            <tr class="restar">
                <td> Fecha 4 </td>
                <td> Descripcion 4</td>
                <td>Inmueble 4</td>
                <td> 20  </td>
                <td> </td>
                <td> Observacion 4 </td>
                <td> Opcion </td>
            </tr>
            
             <tr class="sumar">
                <td> Fecha 5 </td>
                <td> Descripcion 5</td>
                <td>Inmueble 5</td>
                <td> 30 </td>
                <td> </td>
                <td> Observacion 5 </td>
                <td> Opcion </td>
            </tr>
        

    </tbody>
    <tfoot>
        <tr class="total">
            <th></th>
            <th></th>
            <th></th>
            <th>total_col3</th>
            <th>total_col4</th>
        </tr>
    </tfoot>
</table>

6
  • 1
    Excelente amigo! funciona a la perfeccion!! mil gracias por compartirme una solucion! claro que mi tabla no era normal porque tenia espacios en blanco! solucionado! Commented el 21 oct. 2019 a las 2:58
  • 1
    Sabes que ahora me falta que Reste los que estan en rojo, los que son salida de caja o gastos... luego de eso anda todo bien Commented el 21 oct. 2019 a las 3:40
  • 1
    Actualicé mi respuesta para incluir lo de la resta, lo que hice fue agregarle una condición en el cálculo del total de la columna utilizando el operador condicional, de manera que si la fila tiene la clase "sumar" entonces sume el valor de la columna o de lo contrario que se lo reste. Commented el 21 oct. 2019 a las 17:44
  • 1
    En mi ejemplo yo utilizo las clases "sumar" y "restar", pero en tu caso no vas a utilizar estas clases, sino las que se le asignan a la variable "badgeClass" que pueden ser "success" o "danger", es decir que en la parte donde tienes este fragmento "$(this).hasClass("sumar")" lo cambiarías por este otro "$(this).hasClass("success")" Commented el 22 oct. 2019 a las 14:55
  • 1
    Perfecto, quedo todo solucionado gracias a todos tus aportes! Commented el 23 oct. 2019 a las 5:11

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.