05.04.2024, 19:19
Dieses Javascript müsste jetzt von der Berechnung der Summen her passen:
Im HTML habe ich einige Klassen und je ein data-Attribut mit dem Spielernamen in jeder Zeile hinzu gefügt, hier nur die Zeilen für Gabi:
Wenn es noch nicht funktioniert oder nicht deinen Anforderungen entspricht müssen wir weiter sehen.
Code:
<script>
// Abschicken des Formulars durch Drücken von Enter unterdrücken:
window.addEventListener('change', event => {
if (event.target.matches('table input'))
event.preventDefault();
});
// Eventlistener für Eingabe irgend wo auf der Seite registrieren:
window.addEventListener('input', event => {
const
// Die Tabellenzeile, in der sich das Element befindet, ermitteln:
row = event.target.closest('tr');
// Wurde eine Tabellenzeile gefunden?
if (row) {
const
// Das Feld für die Summe in dieser Zeile bereit stellen:
sumField = row.querySelector('.sum'),
// Die Eingabefelder in dieser Zeile bereit stellen:
inputsInRow = row.querySelectorAll('input');
// Schriftfarbe abhängig vom Wert einstellen:
function setColor(input, val) {
if (val < 0) {
input.style.color = "#00CC99";
} else if (val == 0) {
input.style.color = "#000000";
} else if (val > 0) {
input.style.color = "#FF3300";
}
}
// Summe über die zuletzt bereit gestellten Eingabefelder
// ermitteln:
let
sum = 0;
inputsInRow.forEach(input => {
const
// Zunächst den eingegebenen Wert
// als Integer bereit stellen:
val = parseInt(input.value);
// Wenn es sich nicht um ein Summenfeld selber handelt:
// Wert auf die Summe aufaddieren:
if (!input.classList.contains('sum') &&
!input.classList.contains('total-sum')) {
sum += parseInt(input.value);
}
setColor(input, val);
});
// Summe in das Ausgabefeld eintragen:
sumField.value = sum;
setColor(sumField, sum);
// Summen beider Corts in Gesamtsumme übertragen:
const
// Spielername aus data-Attribut der aktuellen Zeile ermitteln:
player = row.dataset.player,
// Alle Tabellenzeilen für diesen Spieler bereit stellen:
playersCorts = document.querySelectorAll(`tr[data-player="${player}"]`);
// Gesamtsumme für alle Corts ermitteln:
let
totalSum = 0;
playersCorts.forEach(cort => {
console.log(cort);
// Wir berücksichtigen die Summe nur, wenn schon ein Wert vorhanden ist:
const
val = cort.querySelector('.sum').value;
if (val != '') {
totalSum += parseInt(val);
}
});
console.log(totalSum);
// Gesamtsumme in Feld eintragen:
const
fieldTotalSum = document.querySelector(`tr[data-player="${player}"] input.total-sum`);
fieldTotalSum.value = totalSum;
}
});
</script>Im HTML habe ich einige Klassen und je ein data-Attribut mit dem Spielernamen in jeder Zeile hinzu gefügt, hier nur die Zeilen für Gabi:
Code:
<tr data-player="gabi" class="gabi cort-one">
<td>Gabi <br></td>
<td><input type="text" autofocus name="g1" type="text" style="width: 40px" tabindex="1" id="g1"
value="-1" />
</td>
<td><input type="text" name="g2" type="text" style="width: 40px" tabindex="4" id="g2" value="-1" />
</td>
<td><input type="text" name="g3" type="text" style="width: 40px" tabindex="7" id="g3" value="-1" />
</td>
<td><input type="text" name="g4" type="text" style="width: 40px" tabindex="10" id="g4" value="-1" />
</td>
<td><input type="text" name="g5" type="text" style="width: 40px" tabindex="13" id="g5" value="-1" />
</td>
<td><input type="text" name="g6" type="text" style="width: 40px" tabindex="16" id="g6" value="-1" />
</td>
<td><input type="text" name="g7" type="text" style="width: 40px" tabindex="19" id="g7" value="-1" />
</td>
<td><input type="text" name="g8" type="text" style="width: 40px" tabindex="22" id="g8" value="-1" />
</td>
<td><input type="text" name="g9" type="text" style="width: 40px" tabindex="25" id="g9" value="-1" />
</td>
<!-- Dem Ausgabefeld geben wir die Klass "sum" um es identifizieren zu können: -->
<td><input class="sum" disabled name="gz1" type="text" style="width: 40px" id="gz1" /></td>
<td></td>
</tr>
<tr data-player="gabi" class="gabi cort-two">
<td>Gabi <br></td>
<td><input name="g10" type="text" style="width: 40px" tabindex="28" id="g10" value="-1" /></td>
<td><input name="g11" type="text" style="width: 40px" tabindex="31" id="g11" value="-1" /></td>
<td><input name="g12" type="text" style="width: 40px" tabindex="34" id="g12" value="-1" /></td>
<td><input name="g13" type="text" style="width: 40px" tabindex="37" id="g13" value="-1" /></td>
<td><input name="g14" type="text" style="width: 40px" tabindex="40" id="g14" value="-1" /></td>
<td><input name="g15" type="text" style="width: 40px" tabindex="43" id="g15" value="-1" /></td>
<td><input name="g16" type="text" style="width: 40px" tabindex="46" id="g16" value="-1" /></td>
<td><input name="g17" type="text" style="width: 40px" tabindex="49" id="g17" value="-1" /></td>
<td><input name="g18" type="text" style="width: 40px" tabindex="52" id="g18" value="-1" /></td>
<td><input class="sum" disabled name="gz2" type="text" style="width: 40px" id="gz2" /></td>
<td><input class="total-sum" disabled name="gg" type="text" style="width: 40px" id="gg" /></td>
</tr>Wenn es noch nicht funktioniert oder nicht deinen Anforderungen entspricht müssen wir weiter sehen.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)