Add values in columns

0

I am trying to add the values of each column and add it in the last row, but I do not see that the content is updated. I build the table in the following way:

   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>';

and my jquery will load it with a script with the following content:

var total = 0;

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

Is it possible to use the same function for each column?

    
asked by Guif If 26.11.2018 в 23:17
source

2 answers

2

This example is specified as: link All credits are from the creator of the file. Response from Aymen stackoverflow in English.

Greetings

 <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>
    
answered by 26.11.2018 / 23:52
source
1

I'll show you an alternative to see if it's useful.

Table, in this case in HTML but it can be your dynamic table with 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>

Fusion Jquery separating the columns and their totals to be summarized later.

<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>

I hope you find it useful.

    
answered by 26.11.2018 в 23:46