Tabellenzeilen verstecken/anzeigen?

M

Maik20

Erfahrenes Mitglied
Ich bastel gerade an einem Script um mir mehrere Tabellenzeilen zu verstecken bzw. wieder anzuzeigen.

Dazu habe ich derzeit folgenden Code:


Und folgenden HTML Tabellenaufbau:

Code: 
<script type=\"text/javascript\" language=\"JavaScript\">
		<!--
		function toggleMe(item){
		  var e=document.getElementsByName(item);
		  alert(e.length);
		  if(!e)return true;
		  for (var i = 0; i <= e.length; i++){
		  	with (e[i].style){
		  		if(visibility == 'hidden' || display=='none'){
					display='block';
					visibility = 'visible';
		  		} else {
					display='none';
					visibility= 'hidden';
		  		}			
		  	}
		  }
		  
		  
		  return true;
		}
		//-->
		</script>

Code: 
<tr name="trg"><td>....</td></tr>
<tr name="trg"><td>....</td></tr>
<tr name="trg"><td>....</td></tr>

Da ich mehrere Zeilen auf einmal ein- bzw. ausblenden möchte nutze ich nicht das Attribut ID.

Leider klappt es so nicht. Die Array länge ist immer eins, wenn ich die Funktion mit trg aufrufe.

Jemand eine Idee?
 
Hi,

Tabellen unterstützen das name-Attribut nicht. Deshalb kann auch nicht mit der Methode getElementsByName darauf zugegriffen werden.

Als Lösung könntest du die gewünschten Zeilen mit gleichen Klassen auszeichnen. Weiterhin erstellst du eine Routine, die alle Elemente mit gleichlautenden Klassen ermittelt.

Beispiel
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function getElementsByClassName(strClassName){
  var arrHelp = new Array();

  // Suchpattern
  var strPattern = eval("/"+strClassName+"/");

  // Alle Elemente über Wildcard ermitteln
  var arrTags = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) ? document.all : document.getElementsByTagName('*');

  // Alle Elemente durchlaufen
  for(varEntry in arrTags){
    // Fall eine Klasse existiert UND dem Suchkriterium entspricht
    if((arrTags[varEntry].className) && (arrTags[varEntry].className.match(strPattern))){
      // In Klassenarray schreiben
      arrHelp[arrHelp.length] = arrTags[varEntry];
    }
  }

  return arrHelp;
}

function toggleMe(item){
  var e=getElementsByClassName(item);
  //alert(e.length);
  if(!e)return true;
  for (var i = 0; i < e.length; i++){
    with (e[i].style){
      if(visibility == 'hidden' || display=='none'){
      	display = '';
      	visibility = 'visible';
      }else{
      	display = 'none';
      	visibility = 'hidden';
      }
    }
  }
  return true;
}
  //-->
</script>
</head>
<body>
<button onclick="toggleMe('trg');">toggleMe()</button>
<table id="tabID">
	<tr class="trg"><td>1 (trg)</td></tr>
	<tr><td>2</td></tr>
	<tr class="trg"><td>3 (trg)</td></tr>
	<tr><td>4</td></tr>
	<tr class="trg"><td>5 (trg)</td></tr>
	<tr class="trg"><td>6 (trg)</td></tr>
</table>
</body>
</html>

Zudem habe ich zwei Sachen in deiner Funktion geändert.
  1. Die Bedingung in der for-Schleife muss auf kleiner geprüft werden, nicht kleiner-gleich
  2. statt der CSS-Eigenschaft display beim Einblenden block zuzuweisen wird der leere String zugewiesen
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück