Wie blende ich eine HTML Zeile aus, wenn eine Zahl gleich 0 ist?

Hallo,
ich möchte gerne in einem HTML Dokument eine Zahl ausblenden lassen, wenn diese auf 0 steht. Die Zahl befindet sich in einer Zeile einer Tabelle. Im Idealfall würde ich gern nicht nur die Zahl auslbenden sondern auch die ganze Zeile (siehe Foto).
Wie lässt sich das realisieren? Ich denke wohl mit einem Javascript oder ähnlichem.
Vielen Dank im Voraus.

Answer 1

[DodgeRT]

erstmal muss schauen, dass du die zeile iwie adressieren kannst. also jede tabellenzeile die ausgeblendet werden kann musst durchnummerieren. wenns nur die eine ist, kannst se auch "rabatt" nennen.

<tr id="zeile-1"><td>...</tr>

mit javascript kannst dann via getElementById("zeile-1) kannst dann drauf zugreifen.

mit getElementsByTagName("td") kannst dann z.b. den td-tag auswählen. (da vermutlich mehrere td-tags drin sind kannst auch ne schleife durchlaufen lassen und jeden wert auf die 0 prüfen).

mit innertext müsstest dann an den inhalt kommen und diesen prüfen.

und später setzt einfach, falls der inhalt 0 ist, die ganze zeile auf display: none.

zeile = document.getElementById("zeile-1");
tds = zeile.getElementByTagName("td");
for(i=0; i< tds.length;i++)
{ 
  content = tds[i].innerText;
  .... hier dann die prüfung---
    zeile.style.display = "none";
}

zumindest in der theorie.... muss man sicher noch an ein paar ecken feilen :)

(kann auch sein dass mann textContent statt innerText nimmt)

Comments

[regex9]

Aufbauend auf dem obigen:

const row = document.getElementById("zeile-1");
const rowCells = row.getElementsByTagName("td");

for (const cell of rowCells) {
  const content = cell.innerText;

  if (content === "0,00") {
    row.style.display = "none";
  }
}

Wenn der Spaltenindex mit dem zu prüfenden Wert schon im Voraus immer bekannt ist, sollte man sich die Schleife sparen.

if (rowCells[columnIndex].innerText === "0,00") {
  // ... 

[regex9]

@regex9

Die Lösung für den zuletzt genannten Fall wäre eigentlich immer noch zu umständlich. Das entsprechende td-Element kann man ja direkt mit querySelector selektieren oder man gibt ihm eine ID und holt es sich in JS via getElementById. Die Tabellenzeile kann man via parentElement ermitteln.

Answer 2

[Thomaskllr]

Garnicht. HTML ist keine Programmiersprache. Aber ja richtig mit js:

https://www.w3schools.com/js/js_htmldom_html.asp

Woher ich das weiß: Berufserfahrung – FaSi /Second level support