Rechnen mit Javascript in einer Tabelle

[Pit]

Hallo Forum,

ich habe eine tabellarische Aufstellung und möchte beim "Checken" einer Checkbox die KB-Werte derselben Zeile addieren. Diese habe ich in ein span-Element derselben Zeile mit der ID "myKB" gesetzt.

Wie gehe ich da am Besten vor?

(Edit Rolf B: HTML für Lesbarkeit reformatiert)

<table>
<tr>
  <td WIDTH="25%" ALIGN=RIGHT>Test: </td>
  <td width=1%><input type="checkbox" name="myAuswahl[]" value="5" checked></td>
  <td colspan=2>Test 1</td>
  <td>27-11-2019</td>
  <td width=10%><span id="myKB">102</span> kb</td>
</tr>
<tr>
  <td WIDTH="25%" ALIGN=RIGHT></td>
  <td width=1%><input type="checkbox" name="myAuswahl[]" value="4"></td>
  <td colspan=2>Test 2</td>
  <td>27-11-2019</td>
  <td width=10%><span id="myKB">102</span> kb</td>
</tr>
<tr>
  <td WIDTH="25%" ALIGN=RIGHT></td>
  <td width=1%><input type="checkbox" name="myAuswahl[]" value="3"></td>
  <td colspan=2>Test 3</td>
  <td>27-11-2019</td>
  <td width=10%><span id="myKB">692</span> kb</td>
</tr>
<tr>
  <td WIDTH="25%" ALIGN=RIGHT></td>
  <td width=1%><input type="checkbox" name="myAuswahl[]" value="2"></td>
  <td colspan=2>Test 4</td>
  <td>25-11-2019</td>
  <td width=10%><span id="myKB">692</span> kb</td>
</tr>
</table>

Pit

[Matthias Apsel]

Hallo Pit,

ich habe eine tabellarische Aufstellung und möchte beim "Checken" einer Checkbox die KB-Werte derselben Zeile addieren. Diese habe ich in ein span-Element derselben Zeile mit der ID "myKB" gesetzt.

Wie gehe ich da am Besten vor?

<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">692</span> kb</td></tr><tr><td 

Eine ID muss dokumentweit eindeutig sein.

Bis demnächst
Matthias

[Pit]

Hallo Matthias,

Wie gehe ich da am Besten vor?

<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">692</span> kb</td></tr><tr><td 

Eine ID muss dokumentweit eindeutig sein.

Ach herrje... das weiß ich natürlich. Hatte es aber vergessen, dank Dir für den Hinweis. 😀

Ok, wenn ich diese ID in eine Klasse ändere, welchen Weg zum kummulierten Ergebnis sollte ich dann gehen? Ich habe das vor Jahren schonmal gemachzt und es funktionierte supi, aber ich finds grad nicht mehr 😟

Pit

[Felix Riesterer]

Lieber Pit,

<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">692</span> kb</td></tr><tr><td 

Wenn denn die Tabelle wirklich sein muss (muss sie nicht), dann eher so (Fiddle dazu):

<table>
  <thead>
    <tr>
      <th>Test1</th>
      <th>Test2</th>
      <th>Test3</th>
      <th>Test4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-1" value="102" checked>
          102 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-2" value="42" checked>
          42 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-3" value="9" checked>
          9 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-4" value="962" checked>
          962 KB
        </label>
      </td>
    </tr>
  </tbody>
</table>
<p>Summe: <output>?</output>KB</p>
<script>

const elements = document.querySelectorAll('[name^="myAuswahl-"]');

elements.forEach(function (el) {

  el.addEventListener("change", function () {

    var summe = 0;

    elements.forEach(function (checkbox) {

      if (checkbox.checked) {
        summe += parseFloat(checkbox.value);
      }
    });

    document.querySelector("output").value = summe;
  });
});

// Anfangswert berechnen
elements[0].dispatchEvent(new Event("change"));

</script>

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Pit,

erst mal solltest du dein HTML in Ordnung bringen. Wenn du den Inputs ein Label spendiest, kannst du wahrscheinlich auf die Tabelle verzichten.

Dann müssen IDs eindeutig sein.

Auf die Elemente kannst du dann mit querySelector zugreifen, und an deren Inhalt kommst du z.B. mit textContent. Da der Zugriff erst nach dem Aufbau der Seite funktioniert, muss dein Script entweder im HTML hinter den Datenfeldern stehen, oder über den Eventhandler DOMContentLoaded aufgerufen werden. Den Zustand von Checkboxen kannst du über die Eigenschaft .checked abfragen.

Gruß
Jürgen

[Felix Riesterer]

Lieber Pit,

name="myAuswahl[]"

wozu hat der Name eckige Klammern? Das macht man eigentlich dann, wenn die Daten serverseitig von PHP ausgewertet werden sollen, da PHP bei "Klammernamen" ein Array anlegt.

Dein Posting hat aber als Tag "JavaScript", so dass ich davon ausgehen muss, dass Du hier rein clientseitig auswerten möchtest. Stimmt diese Annahme?

Für eine JS-basierte Lösung holst Du Dir alle Elemente, die den passenden Namen tragen und addierst die Werte im value-Attribut (dort sollten die Größen in Bytes stehen!), wenn die Checkbox gesetzt ist.

var bytes = 0; // Ergebnis
// alle ausgewählten Elemente mit name="myAuswahl[]"
document.querySelectorAll('[name="myAuswahl[]"]:checked')
.forEach(function (element) {
  bytes += element.value;
});
// In `bytes` steht einen Integer, den man nun nach KB/MB/GB umrechnen kann.

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

var bytes = 0; // Ergebnis
// alle ausgewählten Elemente mit name="myAuswahl[]"
document.querySelectorAll('[name="myAuswahl[]"]:checked')
.forEach(function (element) {
  bytes += element.value;
});
// In `bytes` steht einen Integer, den man nun nach KB/MB/GB umrechnen kann.

so liest du aber die Checkboxen aus, die Bytes stehen im span neben den Checkboxen. Evtl. hilft hier nextElementSibling.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

Evtl. hilft hier nextElementSibling.

wirklich "helfen" tut es das nur bedingt. Pit hätte es deutlich leichter, wenn er die value-Attribute der Checkboxen sinnvoll benutzte.

Liebe Grüße

Felix Riesterer

[Der Martin]

Hallo Felix,

name="myAuswahl[]"

wozu hat der Name eckige Klammern? Das macht man eigentlich dann, wenn die Daten serverseitig von PHP ausgewertet werden sollen, da PHP bei "Klammernamen" ein Array anlegt.

vielleicht hat Pit das mit genau diesem Zweck mal gesehen und unbewusst nachgemacht.

Für eine JS-basierte Lösung holst Du Dir alle Elemente, die den passenden Namen tragen und addierst die Werte im value-Attribut (dort sollten die Größen in Bytes stehen!), wenn die Checkbox gesetzt ist.

var bytes = 0; // Ergebnis
// alle ausgewählten Elemente mit name="myAuswahl[]"
document.querySelectorAll('[name="myAuswahl[]"]:checked')
.forEach(function (element) {
  bytes += element.value;
});
// In `bytes` steht einen Integer, den man nun nach KB/MB/GB umrechnen kann.

Ganz so einfach ist rs nicht, obwohl dein Lösungsansatz einen Extrapunkt für Eleganz verdient hätte. Du addierst hier die value-Angaben der Checkboxen. Die interessanten kB-Werte hat Pit aber in spans in völlig anderen Tebellenzellen stehen.

Abgesehen davon müsste Pit vermutlich auch sein HTML grundlegend in Ordnung bringen. Ich krieg's im Moment nicht eindeutig sortiert, aber es sieht für mich so aus, als wären tr- und td-Elemente ziemlich durcheinandergekommen.

Schönen Abend,
 Martin

[JürgenB]

Hallo Martin,

Abgesehen davon müsste Pit vermutlich auch sein HTML grundlegend in Ordnung bringen. Ich krieg's im Moment nicht eindeutig sortiert, aber es sieht für mich so aus, als wären tr- und td-Elemente ziemlich durcheinandergekommen.

die Tabelle kann ganz weg.

Gruß
Jürgen

[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

[Felix Riesterer]

Lieber Martin,

Du addierst hier die value-Angaben der Checkboxen.

richtig. Dort sollten die zu addierenden Werte auch stehen.

Die interessanten kB-Werte hat Pit aber in spans in völlig anderen Tebellenzellen stehen.

Ja, das finde ich sehr ungeschickt. Aber egal wie schräg sein Markup auch sein mag, für die JS-Lösung könnte er die Werte in Byte als value-Attribute notieren. Das macht das Auswerten sehr leicht.

Abgesehen davon müsste Pit vermutlich auch sein HTML grundlegend in Ordnung bringen. Ich krieg's im Moment nicht eindeutig sortiert, aber es sieht für mich so aus, als wären tr- und td-Elemente ziemlich durcheinandergekommen.

Das ist mir hier wirklich egal. Ich wollte nur mit JS Werte addieren.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Martin,

tr- und td-Elemente ziemlich durcheinandergekommen.

sind sie aber nicht. Nur die Zeilenumbrüche sind etwas spärlich. Das HTML enthält mitten im Gewühl ein paar </tr><tr>, bricht man da um, dann geht's.

Rolf

[Pit]

Hsllo Forum und danke an alle Antworter,

erstens danke für die Antworten.

Zweitens, die Tabelle ist schon ok, da es eine tabellarische Aufführung der Anhänge ist, die hier in Frage kommen.

@Felix: Di eckigen Klammern sind ok, ich möchte php-sekitig ein Array "einkassieren" 😀

@Jürgen / @Felix: Ja, genau um die KB geht es... und nochmal ja, event. hätte ich den value der Checkbox hierfür sin nvoll nuzten können, ich weiß es nicht. Daher meine Frage.

Aber es geht tatsächlich darum: Ich habe eine Tabelle, in einer der Zellen der Zeilen steht die Dateigröße, in derselben Zeile ist die Checkbiox und ich möchte js.seitig (also im Client) prüfen, ob der User zuviele KB zum Versenden ausgewählt hat.

Gruß und nochmal danke für Eure Hilfe,

Pit

[Rolf B]

Hallo Pit,

ich hoffe, das hier hilft Dir.

Aber Du weißt doch, wie's hier zugehen kann. <ironie>HTML muss blitzeblank, zugänglich und bedienbar sein, andernfalls wird erstmal darüber diskutiert bis der Fragesteller entnervt verschwindet.</ironie>

Rolf

[Pit]

Hallo Rolf,

ich hoffe, das hier hilft Dir.

Nicht wirklich...ein 404er hilft ganz selten 😉 Kannst Du den Link fixen?

Aber Du weißt doch, wie's hier zugehen kann. <ironie>HTML muss blitzeblank, zugänglich und bedienbar sein, andernfalls wird erstmal darüber diskutiert bis der Fragesteller entnervt verschwindet.</ironie>

Ich weiß schon, aber im Laufe der Jahre habe ich mich an den "brutalen Charme" dieses Forums gewöhnt und finds ehrlich gesagt schon ok...

Alles liebe nette Leute hier und mir wurde schon sooo viel und wirklich grundlegend geholfen, das passt also schon!

Gruß an Dich und alle anderen,

Pit

[Rolf B]

Hallo Pit,

also ich habe jetzt das gleiche gemacht wie gestern: eine Foren-URL mit Copy+Paste kopiert. Gestern hat er mir aber offenbar einen der Bindestriche typographisch umgedeutet...

Der Link funktioniert jetzt, ist aber letztlich nur ein Beitrag in einem anderen Ast dieses Themas.

Rolf

[Pit]

Hallo Rolf,

Der Link funktioniert jetzt, ist aber letztlich nur ein Beitrag in einem anderen Ast dieses Themas.

Rolf

Aber gut, dass Du ihn nochmal neu gepostet hast, denn diesen Post hatte ich gestern tatsächlich verpasst. Und ja, der hätte mir auch geholfen. Zur Übung werde ich auch mal versuchen, diesen Tip umzusetzen. Und das span-element hatte ich ansich nur deshalb gesetzt, weil ich es für nötig hielt, um die Tabellenzelle zu finden... im Prinzip könnte das span nun auch weggelassen werden...

Pit

[Felix Riesterer]

Lieber Pit,

@Felix: Di eckigen Klammern sind ok, ich möchte php-sekitig ein Array "einkassieren" 😀

verstehe. Na, dann viel Erfolch!

event. hätte ich den value der Checkbox hierfür sin nvoll nuzten können, ich weiß es nicht. Daher meine Frage.

Ein Fiddle dazu habe ich Dir ja gepostet.

und ich möchte js.seitig (also im Client) prüfen, ob der User zuviele KB zum Versenden ausgewählt hat.

Und wenn er das hat, möchtest Du ihm eine Warnung geben, dass ein Upload deshalb scheitern würde?

Liebe Grüße

Felix Riesterer

[Pit]

Hallo Felix,

Und wenn er das hat, möchtest Du ihm eine Warnung geben, dass ein Upload deshalb scheitern würde?

Genau darum geht es :-)

Ist halt für den uyser immer ien wenig doof, wenn der Server es erst meldet... clientmäßig ist es userfreundlicher... 😉

Pit

[Pit]

Ach Felix,

Ein Fiddle dazu habe ich Dir ja gepostet.

Habe ich verpasst! Danke! Ichn muss aber morgeb genau herein schauen...heute bion ich echt platt, aber morgen früh ist das mein erster Aufruf 😀

Danke nochmal und Gruß,Pit!

[Pit]

Wow! Cool! Danke @Felix Riesterer, werde ich morgen (versuchen) nach(zu)vollziehen... Dann mehr von mir und "heel bedankt"!

Pit

[Der Martin]

Hey Pit,

Dann mehr von mir und "heel bedankt"!

wow, je praat Nederlands? Ik ben er echt verrast!

Doei,
 Martin

[Pit]

Hey Pit,

Dann mehr von mir und "heel bedankt"!

wow, je praat Nederlands? Ik ben echt verrast!

Doei,
 Martin

Nederlands is heel mooi, toch? Maar je spreekt het ook, toch? Ik ben opgegroeid in Aken, dat heel dicht bij de grens ligt. En ik leerde de taal op school 😉

Pit

[Der Martin]

Hallo,

Nederlands is heel mooi, toch?

naja, ik lief de taal, maar bijzonders de leden voor hun vriendlijkheid.

Maar je spreekt het ook, toch?

Ja, een beetje. Het werkt omdat naar de radio of televisie nieuws te luisteren, of voor een beetje smalltalk op de straat.

Ik ben opgegroeid in Aken, dat heel dicht bij de grens ligt. En ik leerde de taal op school 😉

Ik heb de taal geleerd slechts als een toerist over vele jaren. En ik was verrasd dat in de voorbije drie of vier jaar ik kunde een boek in Nederlands vloeiend lezen en verstaan!

Groeten uit het Zwaben,
 Martin

[Pit]

Groeten uit het Zwaben,
 Martin

Eerlijk gezegd ben ik nu verrast! Ik leerde de taal op school en groeide op aan de grens en bracht vele jaren (tot op de dag van vandaag) in Nederland door. En jij spreekt de taal zo goed als ik ... heel cool! Compliment voor Zwaben!

Pit

[Der Martin]

Goeden avond

Eerlijk gezegd ben ik nu verrast! Ik leerde de taal op school en groeide op aan de grens en bracht vele jaren (tot op de dag van vandaag) in Nederland door. En jij spreekt de taal zo goed als ik ... heel cool! Compliment voor Zwaben!

*rode kop krijg*
dank je wel ...

Doei,
 Martin

PS: But hey, that's not a miracle, considering all those countless holiday trips to the Nederlands.
But I'm also fluent in English, my favorite language.

[Pit]

Hallo Felix nochmal,

ich habe es mir angeguckt und finde es wunderbar, genau das, was ich suchte. Bis darauf, dass ich das Ergebnis auf dem Server gerne als Array haben würde, deshalb habe ich ein wenig umgebaut, nun passt es perfekt.

Danke für Deine Hilfe und schönen Tag,

Pit

[Pit]

Hallo Felix nochmal,

ich habe es mir angeguckt und finde es wunderbar, genau das, was ich suchte. Bis darauf, dass ich das Ergebnis auf dem Server gerne als Array haben würde, deshalb habe ich ein wenig umgebaut, nun passt es perfekt.

...da ich im Original das value der Checkbox bereits mit der ID des Tabelleneintrags belegt habe, habe ich die ID des Tabelleneintrags nun in den Key des Arrays gesetzt, also in etwa so:

name=checkbox[$datenausDB[0]] value=$datenausDB[3]

Gibt es daran irgendetwas zu beanstanden (von fehlenden " mal abgesehen)?

Hat sogar den Vorteil, dass ich dann serverseitig nicht nur die ID (im Key) erhalte, sondern gleich auch die KB des Eintrages... wobei ich die normalerweise aus der DB gezogen hätte (was auch sicherer wäre).

Aber nochmal...gibt es etwas, was dagegen spricht, die ID des Eintrages per Arraykey weiterzugeben?

Pit

[Rolf B]

Hallo Pit,

du müsstest 3 Sekunden darüber nachdenken, welche Arten von Zeichen in deiner Datenbank stehen, und je nach Ergebnis noch htmlspecialchars() hinzufügen.

Beim Empfangen darfst Du Dich nicht darauf verlassen, dass Du das Form so zurückbekommst wie Du es gesendet hast. Pöse Purchen (die man zu Poden chleudern sollte) sind überall, und wenn jemand am Form herummanipuliert und Dir ungültige Keys sendet (vielleicht sogar mit SQL Injection drin), dann darfst Dich das deinerseits nicht zu Poden chleudern...

Rolf

[Pit]

Hallo Rolf,

du müsstest 3 Sekunden darüber nachdenken, welche Arten von Zeichen in deiner Datenbank stehen, und je nach Ergebnis noch htmlspecialchars() hinzufügen.

Beim Empfangen darfst Du Dich nicht darauf verlassen, dass Du das Form so zurückbekommst wie Du es gesendet hast. Pöse Purchen (die man zu Poden chleudern sollte) sind überall, und wenn jemand am Form herummanipuliert und Dir ungültige Keys sendet (vielleicht sogar mit SQL Injection drin), dann darfst Dich das deinerseits nicht zu Poden chleudern...

Danke für den Hinweis... in diesem Fall sollten die pösen Purschen tatsächlich von mir zu Poden geschleudert werden, da ich jeden Wert, der "von außen" kommt, daraufhin prüfe, was ich erwarte. In diesem Fall also einen Integer. 😀

Pit

[Felix Riesterer]

Lieber Pit,

dass ich das Ergebnis auf dem Server gerne als Array haben würde,

diesen Wunsch kann ich verstehen. Dafür muss es aber nicht zwingend PHP-typische Extrawürste geben.

name=checkbox[$datenausDB[0]] value=$datenausDB[3]

Kann man so machen, muss man aber nicht.

$posted = array();

foreach ($_POST as $key => $value) {

  if (preg_match('~^myAuswahl-(\d+)$~', $key, $found)) {
    // $found enthält "myAuswahl-1234"
    // $found[1] enthält "1234" (wegen Klammern)
    $posted[$found[1]] = (int) $value;
    // $posted[1234] bekommt integer $value
  }
}

Hat sogar den Vorteil, dass ich dann serverseitig nicht nur die ID (im Key) erhalte, sondern gleich auch die KB des Eintrages... wobei ich die normalerweise aus der DB gezogen hätte (was auch sicherer wäre).

Tut mein Mini-Code auch.

Aber nochmal...gibt es etwas, was dagegen spricht, die ID des Eintrages per Arraykey weiterzugeben?

Nö.

Liebe Grüße

Felix Riesterer

[Pit]

Hi Felix,

ich hab jetzt Deine Lösung genommen, habe sie nur von nativem JS auf Jquery umgeschrieben, da ich eh Jquery nutze.

Auf diese Art konnte ich auch die ganze Pfiffigeit Deiner Lösung nachvollziehen. Ich fand die each-Funktion innerhalb der change-Funktion wirklich eine sehr gute Idee. Das erspart nämlich die Unterscheidung, ob die jeweilige KB-Größe addiert oder subtrahiert werden muß. Ich habe das Ganze dann noch darum erweitert, dass ein Max.-Limit nicht überschritten werden darf. Was das Array angeht, ich habs in $('[name^=myAuswahl]').change(function() { geändert, damit kann ich es serverseitig ganz normal und ohne Regex auswerten.

Gruß, Pit

[pl]

Wie gehe ich da am Besten vor?

Am Besten so: Du hältst die Daten für die Tabelle in einem Objekt. Mit diesem Daten wird die Tabelle gerendert (z.B. mit mustache.js ).

Und wenn ein bestimmtes Ereignis fällt, wird nicht in der Tabelle rumgemacht, sondern es werden die Daten im Objekt geändert. Erst danach wird die Tabelle neu gerendert.

Eine Vorgehensweise die sich bestens bewährt hat, MFG