JavaScript Summenberechnung aus einer Tabelle heraus - Am Ende der Spalte eine Summe wie in Exce

[Phil92]

Hallo ihr lieben,

ich verzweifle gerade bisschen an einer eigentlich kleinen Sache.
Ich habe folgendes Problem/Anliegen:

[table="width: 500, class: grid"]
[tr]
[td]Titel[/td]
[td]Bild[/td]
[td]Text[/td]
[td]Anzahl[/td]
[/tr]
[tr]
[td]Text1[/td]
[td]Bild1[/td]
[td]weiterer Text[/td]
[td]2[/td]
[/tr]
[tr]
[td]...[/td]
[td]...[/td]
[td]...[/td]
[td]...[/td]
[/tr]
[tr]
[td]Text XY[/td]
[td]Bild XY[/td]
[td]weiterer Text[/td]
[td]4[/td]
[/tr]
[tr]
[td][/td]
[td][/td]
[td]Summe:[/td]
[td]sum(aller Zellen darüber)[/td]
[/tr]

[/table]

Ich habe also eine ähnliche Tabelle mit sehr vielen Zeilen vorliegen. In der letzten Spalte soll immer die Anzahl eingetragen werden. Am Ende soll dann eine Summe dieser Anzahlen angezeigt werden.

Die Tabelle wird nur im Backend bearbeitet und soll nach dem Veröffentlichen lediglich die Gesamtanzahl anzeigen ohne das ein extra Button geklickt werden muss. Die Zellen/Formularfelder sollen auch nur im Backend bearbeitet werden. Also ist keine weitere Berechnung im Frontend notwendig.

Ich habe mir also gedacht, dass man einfach Formularfelder mit einer ID "anzahl" für alle Zeilen nimmt und in der letzten Zeile dann ein Feld mit der ID "ausgabe" verwendet. Beim Laden der Seite soll ein JavaScript dann einfach eine Summe aller Inhalte der "anzahl"-felder bilden und im Feld "ausgabe" ausgeben.

Leider hapert das ganze bei der Umsetzung. Mein bisheriger Quellcode, wo ich probiert habe, ist totaler mist. ^^

Könntet ihr mir bitte beim erstellen einer funktionierenden Programmierung helfen? Ich wäre euch hierfür sehr dankbar. Je mehr ich dabei lerne, desto besser.

 

[Endless Storm]

Wie wäre es denn, wenn du eine weitere Variable verwendest und jedesmal, sobald du beim durchlaufen auf die letzte Spalte kommst, lässt du sie aufaddieren?

Ich weiß ja nicht, wie dir die Tabelle vorliegt, etwas Code wäre vielleicht hilfreich.

 

[Yuuri]

Nutzt du jQuery oder irgendein JS-Framework?

edit: Mit entsprechenden Anpassungen von deiner Seite aus natürlich:

var n = 0;
$('tbody td:last-child').each( function()
{
	n += parseInt( $(this).text() );
} );
$('tfoot td:last-child').text( n );

Die Tabelle muss allerdings als

<table>
	<thead>
		<tr>
			<td>spalte 1</td>
			<td>spalte 2</td>
			<td>spalte n</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>blabla</td>
			<td>gnagna</td>
			<td>4</td>
		</tr>
		<tr>
			<td>blabla</td>
			<td>gnagna</td>
			<td>1</td>
		</tr>
		<tr>
			<td>blabla</td>
			<td>gnagna</td>
			<td>9</td>
		</tr>
		<tr>
			<td>blabla</td>
			<td>gnagna</td>
			<td>10</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>spalte 1</td>
			<td>spalte 2</td>
			<td>ausgabe summe</td>
		</tr>
	</tfoot>
</table>

formatiert sein (eben mit thead, tbody und tfoot).

 

[Phil92]

Habe das ganze mal so probiert jetzt, mein Editor hatte einfach nur aus output ein input gemacht ^^

<script type="text/javascript">
function doSum() {
var fields = document.getElementsByName("anzahl");
var sum = 0;
for (var i=0; i<fields.length; i++) {
var v = parseInt(fields[i].value, 10);
if (isNaN(v)) v = 0;
sum += v;
}
document.getElementById("output").value = sum;
}
</script>

<form action="">
  <table style="text-align: left; width: 100px;" border="1"
 cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input name="anzahl" id="input"
 size="2" value="1">
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input name="anzahl" id="input"
 size="2" value="2">
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input name="anzahl" id="input"
 size="2" value="2">
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input name="anzahl" id="input"
 size="2" value="2">
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input name="anzahl" id="input"
 size="2" value="2">
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td> <input value="Summieren"
 onclick="doSum();" type="button">
        </td>
        <td><input name="ausgabe" id="output"
 size="2">
        </td>
      </tr>
    </tbody>
  </table>
  <br>
</form>

jetzt müsste ich nur noch hinbekommen, dass statt dem button das laden der seite das rechnen startet

 

[Endless Storm]

Dann probiere es mal mit:

<body onload="doSum()">
(...)
</body>

 

[Phil92]

Dann probiere es mal mit:

<body onload="doSum()">
(...)
</body>

Super, danke, läuft so wie gewünscht! Ich bin happy. ^^