✔ Tabellenzeile per Checkbox ausblenden

M

Myar

Mitglied
Hallöchen!

Ich bekomme eine Tabelle ausgegeben, mit Datensätzen, die einen Fehler enthielten beim Upload in die DB.
Es gibt vier verschiedene Fehlermeldungen.
Nun möchte ich mit Checkboxen den Benutzer auswählen lassen, welche Zeilen er angezeigt bekommen möchte, sortiert nach fehlermeldung.

Also da sind vier Checkboxen und man kann lsutig auswählen, welche denn angezeigt werden sollen.

HTML: 
<p>Zeige nur Datensätze mit folgenden Fehlern:<br />
<input type="checkbox" name="fehler" id="fehler1" onchange="setVisibility()" checked="checked"> Keine UVP
<input type="checkbox" name="fehler" id="fehler2" onchange="setVisibility()" checked="checked"> Kein VK-Preis
<input type="checkbox" name="fehler" id="fehler3" onchange="setVisibility()" checked="checked"> Weder noch
<input type="checkbox" name="fehler" id="fehler4" onchange="setVisibility()" checked="checked"> Artikel nicht gefunden</p>

<table><tr><td>Nr.</td><td>Zeile in CSV Datei</td><td>EAN</td><td>Hersteller-Name</td><td>Artikelnummer</td><td>Fehler:</td></tr>
<!--anfang:ERGEBNIS!-->
<tr id="{fehler}"><td>{nummer}</td><td>{zeile}</td><td>{ean}</td><td>{id}</td><td>{artnr}</td><td>{fehler}</td></tr>
<!--ende:ERGEBNIS!-->
</table>

Und das hatte ich mir gedacht... funktioniert auch fast. Nur scheint er nur das Element <tr> ausgeblendet zu werden, die <td>s bleiben... außerdem bleiben die checkboxen gesetzt und der Haken geht nicht weg...

HTML: 
function setVisibility(){
    if(document.getElementById('fehler1').checked = true){
    	document.getElementById('Keine UVP').style.display = 'block';
    }else{
    	document.getElementById('Keine UVP').style.display = 'none';
    }
    if(document.getElementById('fehler2').checked = true){
    	document.getElementById('Kein VK_Preis!').style.display = 'block';
    }else{
    	document.getElementById('Kein VK_Preis!').style.display = 'none';
    }
    if(document.getElementById('fehler3').checked = true){
    	document.getElementById('Kein Vk-Preis und keine UVP!').style.display = 'block';
    }else{
    	document.getElementById('Kein Vk-Preis und keine UVP!').style.display = 'none';
    }
    if(document.getElementById('fehler4').checked = true){
    	document.getElementById('Artikel nicht gefunden').style.display = 'block';
    }else{
    	document.getElementById('Artikel nicht gefunden').style.display = 'none';
    }
}

Kann mir da wer helfen?
 
Einzelne Zeilen einer Tabelle ausblenden ist nicht so ohne weiteres möglich (der überhaupt nicht, bin mir nicht sicher).

Aber wenn du es eh sortiert nach Fehlermeldung anzeigst, dann mach doch einfach für jeden Fehlertyp eine eigene Tabelle. Da ist es dann ganz einfach sie ein- oder auszublenden.
 
Das hier ist eine Zuweisung und kein Vergleich. Deshalb wird immer der if-Zweig genommen.

Javascript: 
//Vorher
if(document.getElementById('fehler4').checked = true)

//Nachher
if(document.getElementById('fehler4').checked == true)
//oder
if(document.getElementById('fehler4').checked === true)
//ODER VIEL BESSER
if(document.getElementById('fehler4').checked)

Und "block" ist für Tabellenzeilen nicht das richtige. Ich nehme an, deshalb hast du das "Gefühl" die <tr> würden verschwinden.

Javascript: 
display = 'table-row'
 
Hallo und danke für die Hilfe.

Es funktioniert auch fast. Der Code sieht nun so aus:

HTML: 
function setVisibility1(){
    if(document.getElementById('fehler1').checked){
    	document.getElementById('Keine UVP').style.display = 'table-row';
    }else{
    	document.getElementById('Keine UVP').style.display = 'none';
    }
}
function setVisibility2(){
	if(document.getElementById('fehler2').checked){
    	document.getElementById('Kein VK-Preis!').style.display = 'table-row';
    }else{
    	document.getElementById('Kein VK-Preis!').style.display = 'none';
    }
}
function setVisibility3(){
	if(document.getElementById('fehler3').checked){
    	document.getElementById('Kein Vk-Preis und keine UVP!').style.display = 'table-row';
    }else{
    	document.getElementById('Kein Vk-Preis und keine UVP!').style.display = 'none';
    }
}
function setVisibility4(){
	if(document.getElementById('fehler4').checked){
    	document.getElementById('Artikel nicht gefunden').style.display = 'table-row';
    }else{
    	document.getElementById('Artikel nicht gefunden').style.display = 'none';
    }
}

Aber, er nimmt nur ein (das oberste) Element, dass die ID hat. Die anderen bleiben stehen. Welche Möglichkeit habe ich noch dafür zu sorgen, dass alle Reihen verschwinden?
 
Myar hat gesagt.:
Aber, er nimmt nur ein (das oberste) Element, dass die ID hat. Die anderen bleiben stehen.
Zum Vergrößern anklicken....

Eine ID darf nur ein einziges Mal vor kommen. Deshalb liefert der Browser nur das aller erste Element zurück.

Z.B. könntest du den Elementen eine CSS-Klasse geben und dann über alle <tr> iterieren (getElementsByTagName) und prüfen, ob es die entsprechende Klasse hat.
Oder in modernen Browsern getElementsByClassName
 
Ich habe das jetzt mal ein bisschen umgebaut und andere IDs für die Zeilen vergeben aber damit geht es:

HTML: 
<script language="javascript" type="text/javascript">
function setVisibility(){
    if(document.getElementById('fehler1').checked){
    	document.getElementById('1').style.display = 'table-row';
    }else{
    	document.getElementById('1').style.display = 'none';
    }

    if(document.getElementById('fehler2').checked){
    	document.getElementById('2').style.display = 'table-row';
    }else{
    	document.getElementById('2').style.display = 'none';
    }

    if(document.getElementById('fehler3').checked){
    	document.getElementById('3').style.display = 'table-row';
    }else{
    	document.getElementById('3').style.display = 'none';
    }

    if(document.getElementById('fehler4').checked){
    	document.getElementById('4').style.display = 'table-row';
    }else{
    	document.getElementById('4').style.display = 'none';
    }
}
</script>
<p>Zeige nur Datensätze mit folgenden Fehlern:<br />
<input type="checkbox" name="fehler" id="fehler1" onclick="setVisibility()" checked="checked"> Keine UVP
<input type="checkbox" name="fehler" id="fehler2" onclick="setVisibility()" checked="checked"> Kein VK-Preis
<input type="checkbox" name="fehler" id="fehler3" onclick="setVisibility()" checked="checked"> Weder noch
<input type="checkbox" name="fehler" id="fehler4" onclick="setVisibility()" checked="checked"> Artikel nicht gefunden</p>

<table><tr><td>Nr.</td><td>Zeile in CSV Datei</td><td>EAN</td><td>Hersteller-Name</td><td>Artikelnummer</td><td>Fehler:</td></tr>
<tr id="1"><td>nummer</td><td>zeile</td><td>ean</td><td>id</td><td>artnr</td><td>fehler1</td></tr>
<tr id="2"><td>nummer</td><td>zeile</td><td>ean</td><td>id</td><td>artnr</td><td>fehler2</td></tr>
<tr id="3"><td>nummer</td><td>zeile</td><td>ean</td><td>id</td><td>artnr</td><td>fehler3</td></tr>
<tr id="4"><td>nummer</td><td>zeile</td><td>ean</td><td>id</td><td>artnr</td><td>fehler4</td></tr>
</table>
 
@tombe
leider hat meine Tabelle schnell mal mehr als vier Reihen. Die wird dynamsich erzeugt.
Aber danke dir für diesen Tipp.

ich habe es jetzt aber hinbekommen:

Code: 
function setVisibility(){
	var arr = new Array();
    arr = document.getElementsByTagName('tr');
	
    if(document.getElementById('fehler1').checked){
    	for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Keine UVP')
    			document.getElementsByTagName('tr').item(i).style.display = 'table-row';
    	}
    }else{
    	for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Keine UVP')
    			document.getElementsByTagName('tr').item(i).style.display = 'none';
    	}
    }
	
	if(document.getElementById('fehler2').checked){
		for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Kein VK-Preis!')
    			document.getElementsByTagName('tr').item(i).style.display = 'table-row';
    	}
    }else{
    	for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Kein VK-Preis!')
    			document.getElementsByTagName('tr').item(i).style.display = 'none';
    	}
    }
	
	if(document.getElementById('fehler3').checked){
		for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Kein VK-Preis und keine UVP!')
    			document.getElementsByTagName('tr').item(i).style.display = 'table-row';
    	}
    }else{
    	for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Kein VK-Preis und keine UVP!')
    			document.getElementsByTagName('tr').item(i).style.display = 'none';
    	}
    }
	
	if(document.getElementById('fehler4').checked){
		for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Artikel nicht gefunden')
    			document.getElementsByTagName('tr').item(i).style.display = 'table-row';
    	}
    }else{
    	for (var i = 0; i < arr.length; i++) {
    		if(document.getElementsByTagName('tr').item(i).className == 'Artikel nicht gefunden')
    			document.getElementsByTagName('tr').item(i).style.display = 'none';
    	}
    }
}

Und eine Beispieltabelle, die ich grad manuell geschustert habe:
HTML: 
<table ><tr><td>Nr.</td><td>Zeile in CSV Datei</td><td>EAN</td><td>Hersteller-Name</td><td>Artikelnummer</td><td>Fehler:</td></tr>
<!--anfang:ERGEBNIS!-->
<tr class='Keine UVP'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Keine UVP</td></tr>
<tr class='Kein VK-Preis!'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Kein VK-Preis</td></tr>
<tr class='Kein VK-Preis und keine UVP!'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>weder noch</td></tr>
<tr class='Artikel nicht gefunden'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Artikel nicht gefunden</td></tr>
<tr class='Kein VK-Preis!'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Kein VK-Ppreis</td></tr>
<tr class='Kein VK-Preis und keine UVP!'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Weder noch</td></tr>
<tr class='Artikel nicht gefunden'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Artikel nicht gefunden</td></tr>
<tr class='Keine UVP'><td>1</td><td>325</td><td>549451561561</td><td>Bla</td><td>145520</td><td>Keine UVP</td></tr>
<!--ende:ERGEBNIS!-->
</table>

danke euch! Wieder was gelernt :)
 
Das war mir schon klar das deine Tabelle dynamisch erzeugt wird und eine unterschiedliche Anzahl Zeilen hat.

Ich hatte es auch nur als Beispiel und für mich zum testen so "starr" umgebaut.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück