Însumare valori într-un tabel

Limbaje de Programare JavaScript / Node
1

Salutare,

Se da urmatorul tabel:

<table width="960" border="1" align="center" id="activity_table">
<tr>
    <td width="192">Activity</td>
    <td width="192" align="center">Option 1</td>                        
    <td width="192" align="center">Option 2</td>
    <td width="192" align="center">Total</td>
</tr>
<tr>
    <td>Activity 1</td>
    <td align="center">
        <input type="text" name="activity_1_option_1" id="activity_1_option_1" value="0" class="col1" size="10" />
    </td>                        
    <td align="center">
        <input type="text" name="activity_1_option_2" id="activity_1_option_2" value="0" class="col2" size="10" />
    </td>
    <td align="center">
        <input type="text" name="activity_1_total" id="activity_1_total" value="0" class="" size="10" readonly />
    </td>
</tr>
<tr>
    <td>Activity 2</td>
    <td align="center">
        <input type="text" name="activity_2_option_1" id="activity_2_option_1" value="0" class="col1" size="10" />
    </td>                        
    <td align="center">
        <input type="text" name="activity_2_option_2" id="activity_2_option_2" value="0" class="col2" size="10" />
    </td>
    <td align="center">
        <input type="text" name="activity_2_total" id="activity_2_total" value="0" class="" size="10" readonly />
    </td>
</tr>
<tr>
    <td>Activity 3</td>
    <td align="center">
        <input type="text" name="activity_3_option_1" id="activity_3_option_1" value="0" class="col1" size="10" />
    </td>                        
    <td align="center">
        <input type="text" name="activity_3_option_2" id="activity_3_option_2" value="0" class="col2" size="10" />
    </td>
    <td align="center">
        <input type="text" name="activity_3_total" id="activity_3_total" value="0" class="" size="10" readonly />
    </td>
</tr>
<tr class="total">
    <td>Total</td>
    <td align="center">
        <input type="text" name="total_activity_1" id="total_activity_1" value="0" class="" size="10" readonly />
    </td>                        
    <td align="center">
        <input type="text" name="total_activity_2" id="total_activity_2" value="0" class="" size="10" readonly />
    </td>
    <td align="center">
        <input type="text" name="grand_total" id="grand_total" value="0" class="" size="10" readonly />
    </td>
</tr>          
</table>

Ceea ce vreau sa fac este sa insumez fiecare coloana atat pe verticala, cat si pe orizontala, in input-urile corespunzatoare.

Pe coloana, insumarea functioneaza corect si in ultimul rand, cel de totaluri, am valorile calculate corespunzator.

Nu prea imi dau seama insa cum sa fac insumarea si pe rand si, la final, si in input-ul “grand_total”.

Folosesc urmatorul cod jQuery:

$('#activity_table tr:not(.total) input:text').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];

$table.find('tr:not(.total) .col'+thisNumber).each(function() {
    total += +$(this).val();
});

thisNumber++;
$table.find('.total td:nth-child('+thisNumber+') input').val(total);
});

Vreo sugestie?

Multumesc.

2

Cred că ai o problemă cu numărătoarea! :smiley:
http://devforum.ro/t/insumare-valori-campuri-intr-un-formular-folosind-jquery/384

Eu aș face următoarea chestie: din moment ce ai doar adunare, nu conează foarte mult ordinea în care faci operațiile. Prin urmare, poți adăuga o clasă fiecărui input (să zicem js-sumUp), după care folosești map și reduce:

var sumUp = $('.js-sumUp').map(function(){ return this.value });
sumUp.reduce( function( a, b ){ return a + b; }, 0 );

alternativ, poți itera printre ele:

var sumUp = 0;
$('.js-sumUp').each( function( i, el ){ sumUp += el.value; });

Dacă nu vrei să adaugi o clasă nouă, poți folosi un selector ceva mai lent: $('input[name^="total_activity"]')

3

Haha, nu neaparat cu numaratoarea, cat cu jQuery.

Nu prea inteleg solutia propusa de tine :confused:

Ar putea fi prinsa in: $('#activity_table tr:not(.total) input:text').bind('keyup change', function() { }); ?