Javascript: Tabelle - Reihen - Summe

Hallo.

Ich habe folgende Tabelle, die mit HTML bzw. Javascript automatisch erstellt wird.
Das funktioniert auch ohne Probleme.
In die jeweiligen Zellen werden die Werte je nach vorheriger Eingabe mit den entsprechenden Zahlen gefüllt.
Mein Problem besteht aber darin, dass ich gerne jeweils bei "Bilanz" die Summe der jeweiligen Reihe sehen möchte.
Ich habe die Zellen markiert, die dann jeweils zusammengezählt werden sollen.
In der grün markierten Zelle soll dann die jeweilige Summe der Reihe der markierten Zellen stehen.
Leider fehlt mir das Wissen und die Idee, wie ich in dem Fall jeweils pro Reihe ab Spalte 4 bis 10 in Spalte 11 die Summe bekomme.

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 2930254464

Url: https://administrator.de/forum/javascript-tabelle-reihen-summe-2930254464.html

Ausgedruckt am: 22.12.2024 um 17:12 Uhr

2 Kommentare

Neuester Kommentar

Servus,
warum summierst du die Spalten nicht einfach schon zum Zeitpunkt wenn du doch schon mit JavaScript die Tabelle baust?

Aber bitte, auch das ist natürlich auch nachträglich noch möglich, effizienter wäre es aber ehrlich gesagt schon zum Erstellungszeitpunkt.

Variante mit plain JavaScript ohne Library

https://jsfiddle.net/v7n59xq8/1/

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>tablesum</title>
</head>
<script>
function calc(){
	document.querySelectorAll('#mytable tr:not(:first-child)').forEach(function(row){  
		var sum = 0;
		row.querySelectorAll('td:nth-child(1n+4):not(:empty)').forEach(function(col){  
			sum += parseFloat(col.innerText);
		});
		row.querySelector('td:last-child').innerText = sum.toFixed(2);  
	});
}
</script>
<body onLoad="calc()">  
<table id="mytable">  
<tr>
	<th>Header1</th>
  	<th>Header2</th>
   	<th>Header3</th>
    <th>Header4</th>
    <th>Header5</th>
    <th>Header6</th>
    <th>Header7</th>
    <th>Header8</th>
    <th>Header9</th>
    <th>Header10</th>
    <th>Sum</th>
</tr>
<tr>
	<td>2022</td>
	<td>Januar</td>
    <td></td>
  	<td>22.40</td>
	<td>11.10</td>
	<td></td>    
	<td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
	<td>2022</td>
	<td>Februar</td>
    <td></td>
  	<td>2.40</td>
	<td>11.10</td>
	<td></td>    
	<td>17.50</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>
</body>
</html>