Rechnen mit Javascript in einer Tabelle

[Rolf B]

Hallo JürgenB,

das ist aber für die Problemstellung irrelevant. Wenn's eine Liste wird, gibt es ebenfalls Checkboxen und man muss von der Checkbox zum Werte-Span kommen.

An der prinzipiellen Vorgehensweise ändert sich nichts. Man muss die aktiven Checkboxen finden, von dort zum Zeilencontainer und weiter zum Span.

Vertrauen in fehlerfreies HTML vorausgesetzt, ist das tatsächlich als Einzeiler machbar:

  let summe = Array.prototype.reduce.call(
  	table.querySelectorAll("[name='myAuswahl[]']:checked"),
    ((sum, cb) => sum + parseInt(cb.closest("tr").querySelector(".myKB").textContent)),
    0);

Das muss mit reduce.call gemacht werden, weil die Nodelist die reduce-Methode nicht kennt. Die Implementierung auf Array.prototype kommt aber mit Nodelisten klar.

Etwas ausführlicher und ohne Array.reduce:

  // In table wird das HTMLElement erwartet, das dem <table> Element entspricht
  let checked = table.querySelectorAll("[name='myAuswahl[]']:checked")
  let summe = 0;
  checked.forEach(cb => {
    let row = cb.closest("tr");   // ältere Browser brauchen Polyfill
    let kbSpan = row.querySelector(".myKB");  // von der Row zum Werte-Span
    let value = parseInt(kbSpan.textContent);
    summe = summe + value;
  });

Verwendet man eine Liste statt einer Table, muss man die Variable table mit der Liste initialisieren und statt closest("tr") setzt man closest("li") - oder ähnlich, je nach verwendetem Listen-Element-Container.

Einen Polyfill für closest findet man bei Mozilla.

Rolf