[JS]Jak dokonywać sumowania w kilku grupach wierszy?

[martinstw]

Witam wszystkich!

 

Mam tabelkę , która ma 6 kolumn, gdzie w czterech ostatnich są pola input, a w ostatnim polu są wartości, które należy sumować.

 

Tabelka ma wyglądać tak:

 

20 P1 0 005A Tresć 1 B 0,22 0,34 2 123,00 checkbox
20 P1 0 010 Tresć 2 B 0,25 0,66 2 230,00 checkbox
20 P1 1 015 Tresć 3 BD 0,35 0,77 2 210,00 checkbox
20 P2 0 005A Tresć 1 B 0,22 0,34 2 123,00 checkbox
20 P2 0 010 Tresć 2 B 0,25 0,66 2 230,00 checkbox
20 P2 1 015 Tresć 3 BD 0,35 0,77 2 210,00 checkbox
20 P3 0 005A Tresć 1 B 0,22 0,34 2 123,00 checkbox
20 P3 0 010 Tresć 2 B 0,25 0,66 2 230,00 checkbox
20 P3 1 015 Tresć 3 BD 0,35 0,77 2 210,00 checkbox
.
.
.
20 P6 0 005A Tresć 1 B 0,22 0,34 2 123,00 checkbox
20 P6 0 010 Tresć 2 B 0,25 0,66 2 230,00 checkbox
20 P6 1 015 Tresć 3 BD 0,35 0,77 2 210,00 checkbox

 

Czyli są tutaj wiersze i komórki (odstępy między komórkami symbolizują grubość linii komórki). Jest tutaj 11 kolumn.

 

Chodzi o to, żeby np. dla wierszy gdzie jest symbol np. P1

 

20 P1 0 005A Tresć 1 B 0,22 0,34 2 123,00 checkbox
20 P1 0 010 Tresć 2 B 0,25 0,66 2 230,00 checkbox
20 P1 1 015 Tresć 3 BD 0,35 0,77 2 210,00 checkbox

 

sumować wyniki z przedostatniej kolumny (czyli 10 kolumny: dla P1: 123,00+230,00+210,00) i

 

wynik (563,00) wpisywać do pola select, gdzie po kliknięciu na option: sumaTk1, pojawiał by się obok opcji, input gdzie byłby widoczny wynik sumowania dla tych wierszy.

I tak dla wierszy gdzie są P od 1 do 6. Czyli dla P2, P3, P4, P5 i P6 taka sama procedura jak dla P1.

 

Wyniki pojawiałby się pod tabelką:

<select id="oblicz" name="obliczanie" style="color: blue; background-color: yellow;" onchange="addTextField(this);">
          <option value="oblicz" selected="selected">OBLICZ:</option>
          <option value="SumaTk">Oblicz sumę wszystkich Tk:</option>
          <option value="SumaTk1">Oblicz sumę wszystkich Tk z P1:</option>
          <option value="SumaTk2">Oblicz sumę wszystkich Tk z P2:</option>
          <option value="SumaTk3">Oblicz sumę wszystkich Tk z P3:</option>
          <option value="SumaTk4">Oblicz sumę wszystkich Tk z P4:</option>
          <option value="SumaTk5">Oblicz sumę wszystkich Tk z P5:</option>
          <option value="SumaTk6">Oblicz sumę wszystkich Tk z P6:</option>
</select> 

<label id="SumaTk"></label>
<label id="SumaTk1"></label>
<label id="SumaTk2"></label>
<label id="SumaTk3"></label>
<label id="SumaTk4"></label>
<label id="SumaTk5"></label>
<label id="SumaTk6"></label>

 

Skrypt do pojawiania się inputa koło option, wygląda tak:

 

<!--Otwieranie inputa do wpisywania sumyTko w liście rozwijalnej-->

<script type="text/javascript">

function addTextField(x) {

     if (x.value == "SumaTko") {

         var newTextField = document.createElement("input");
         newTextField.type = "text";
         newTextField.name = "sumaTk";
         newTextField.id = "sumaTk";
         newTextField.value = "* suma Tk";
         document.getElementById("SumaTk").appendChild(newTextField);

     } else if (x.value !== "SumaTk") {

         var newTextField = document.getElementById("sumaTk");

         if(newTextField) {

             document.getElementById("SumaTk").removeChild(newTextField);

         }
     }
}

</script>

<select id="oblicz" name="obliczanie" style="color: blue; background-color: yellow;" onchange="addTextField(this);">
          <option value="oblicz" selected="selected">OBLICZ:</option>
          <option value="SumaTk">Oblicz sumę wszystkich Tk:</option>
          <option value="SumaTk1">Oblicz sumę wszystkich Tk z P1:</option>
          <option value="SumaTk2">Oblicz sumę wszystkich Tk z P2:</option>
          <option value="SumaTk3">Oblicz sumę wszystkich Tk z P3:</option>
</select> 

<label id="SumaTk"></label>
<label id="SumaTk1"></label>
<label id="SumaTk2"></label>
<label id="SumaTk3"></label>

 

 

Kod tabelki: http://www.wklej.org/hash/c53741478f/

 

Czy da się tutaj nie numerować id w 10 kolumnie dla każdego z wierszy (tam gdzie są wyniki), tylko, żeby automatycznie wstawiało id większe o 1, dla kolejnych wierszy?

 

Działanie tego skryptu ma być podobne do tego tutaj (w tym przypadku wykonuje obliczenie w wierszach a potem sumuje wyniki z kolumny Tk i po kliknięciu w opcję w liście rozwijalnej podaje wynik sumowania w polu input):

<html>
<head>
<script type="text/javascript">

function obliczWartosci()
{

var tr = document.getElementById('tabela1').getElementsByTagName('tr');
for(var i=0; i<tr.length; i++)
   {
    var td = tr[i].getElementsByTagName('td');
    for(var j=0; j<td.length; j++)
     {
      var input = td[j].getElementsByTagName('input');
       for(var k=0; k<input.length; k++)
       {
         if(j == 2){ var tp = parseFloat(input[k].value)};
         if(j == 3){ var n  = parseFloat(input[k].value)};
         if(j == 4){ var tj = parseFloat(input[k].value)};
        }
             var a = (i*4)-1;
             document.form1.elements[a].value = parseFloat(tp / n + tj);
         if(isNaN(document.form1.elements[a].value)) document.form1.elements[a].value = 0;

       }
    }
}


function obliczSume()
{
var ile = document.getElementById('tabela1').getElementsByTagName('tr');
var suma = 0;
for(var u = 1; u<=(ile.length-2);u++){
var el = (u*4)-1;
var p = parseFloat(document.form1.elements[el].value);
suma = parseFloat(p+suma);
}
document.form1.valSuma.value = suma;
}
</script>
</head>
<BODY>

     <form name="form1" id="form1" method="post" action="" >
<table id="tabela1" border="1">
   <tr>
       <th>Kod obiektu</th>
       <th>Treść</th>
       <th>TP</th>
       <th>N</th>
       <th>TJ</th>
       <th>TK</th>
   </tr>
   <tr>
       <td>23TT</td>
       <td>Taka sobie treść</td>
       <td><input type="text" id="tp" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="n" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="tj" value="0" onkeyup="obliczWartosci()"/></td>
       <th><input type="text" id="valWynik1" value="0" readonly="readonly"/></th>
   </tr>
   <tr>
       <td>24TT</td>
       <td>Taka sobie treść</td>
       <td><input type="text" id="tp" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="n" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="tj" value="0" onkeyup="obliczWartosci()"/></td>
       <th><input type="text" id="valWynik2" value="0" readonly=""/></th>
   </tr>
   <tr>
       <td>24TT</td>
       <td>Taka sobie treść</td>
       <td><input type="text" id="tp" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="n" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="tj" value="0" onkeyup="obliczWartosci()"/></td>
       <th><input type="text" id="valWynik3" value="0" readonly=""/></th>
   </tr>
   <tr>
       <td>24TT</td>
       <td>Taka sobie treść</td>
       <td><input type="text" id="tp" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="n" value="0" onkeyup="obliczWartosci()"/></td>
       <td><input type="text" id="tj" value="0" onkeyup="obliczWartosci()"/></td>
       <th><input type="text" id="valWynik4" value="0" readonly=""/></th>
   </tr>
</table>

<select>
         <option value="oblicz" onClick="obliczSume()">Oblicz sumę Tko</option><input type="text" id="valSuma" value="0" readonly="readonly"/>
</select>

</form>
</BODY>
</HTML>

 

Proszę o pomoc

 

Pozdrawiam