0

Estoy intentando sumar los valores de cada columna y añadirlo en la ultima fila, pero no veo que se actualice el contenido. La tabla la construyo de la siguiente forma:

   echo "<tr>";
    echo"<td data-field='count'></td>";
    echo"<td data-field='count'>1</td>";
    echo"<td data-field='count'>3</td>";
    echo"<td data-field='count'>4</td>";
    echo"<td data-field='count'>5</td>";
    echo"<td data-field='count'>6</td>";
    echo "</tr>";
   echo "<tr>";
    echo"<td data-field='count'></td>";
    echo"<td data-field='count'>2</td>";
    echo"<td data-field='count'>2</td>";
    echo"<td data-field='count'>2</td>";
    echo"<td data-field='count'>2</td>";
    echo"<td data-field='count'>2</td>";
    echo "</tr>";

        echo '<tfoot>
            <tr>
                <td></td> 
                <td id="total">.</td> 
                <td id="total">.</td> 
                <td id="total">.</td> 
                <td id="total">.</td> 
                <td id="total">.</td> 
            </tr>
        </tfoot>';

y mi jquery lo cargo mediante un script con el siguiente contenido:

var total = 0;

$(data).each(function(i){
    total = total+ parseInt(data[i].cound);
});
$('#total').html(total);

Es posible usar la misma función para cada columna?

4
  • Si estas armando la tabla con PHP, por que estas sumando con Jquery ? .. No sería mas facil sumar en el mimo php y mostrar el resultado ? el 26 nov. 2018 a las 22:20
  • @MauricioJavierBiott porque en un futuro cogeré datos de una BBDD y serán dinamicos
    – Guif If
    el 26 nov. 2018 a las 22:21
  • Es probable que debas diferenciar las funciones ya que en el jquery el $('#total') son todas las columnas del tfoot . el 26 nov. 2018 a las 22:27
  • @MauricioJavierBiott aunque lo deje en una única td no me hace la suma
    – Guif If
    el 26 nov. 2018 a las 22:34

2 respuestas 2

2

En este ejemplo se especifica como: link Todos los créditos son del creador del archivo. Respuesta de Aymen stackoverflow en ingles.

Un saludo

 <table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">5</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
        </tr>
    </table> 
<script>
       var totals=[0,0,0];
        $(document).ready(function(){

            var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

            $dataRows.each(function() {
                $(this).find('.rowDataSd').each(function(i){        
                    totals[i]+=parseInt( $(this).html());
                });
            });
            $("#sum_table td.totalCol").each(function(i){  
                $(this).html("total:"+totals[i]);
            });

        });
</script>
1
  • me ha servido. gracias!!
    – Guif If
    el 27 nov. 2018 a las 7:13
1

Te muestro una alternativa para ver si te es útil.

Tabla, en este caso en HTML pero puede ser tu tabla dinámica con PHP

<table >
    <tr>
        <td >Columna  1</td>
        <td >Columna  2</td>
        <td>Columna 3</td>
    </tr>
    <tr>
        <td class="col1" >1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="col1" >1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="col1" >1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="col1" >1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tfoot>
        <tr>
            <td class="total_col_1" >.</td>
            <td class="total_col_2" >.</td>
            <td class="total_col_3">.</td>
        </tr>
    </tfoot>

</table>

Fución Jquery separando las columnas y sus totales para luego ser sumarizadas.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    var tot1 = 0;
    var tot2 = 0;
    var tot3 = 0;
    $('.col1').each(function(e){
        tot1 += parseInt($(this).html());
    });
    $('.col2').each(function(e){
        tot2 += parseInt($(this).html());
    });
    $('.col3').each(function(e){
        tot3 += parseInt($(this).html());
    });
    $('.total_col_1').html(tot1);
    $('.total_col_2').html(tot2);
    $('.total_col_3').html(tot3);
</script>

Espero te sea de utilidad.

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.