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

justynasankiel · Post autor: **justynasankiel** » ndz sty 11, 2009 12:12 pm

Witam wszystkich!

Mam tabelkę , która ma 7 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:

Kod: Zaznacz cały

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

Kod: Zaznacz cały

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

Kod: Zaznacz cały

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

Kod: Zaznacz cały

<!--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 co 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):

Kod: Zaznacz cały

<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