Mehrere Tabellenreihen gleichzeitig ansprechen

mammuteffect · 24. August 2007

Ahoi,
mal wieder ein kleines Problem: ich möchte über eine js-Funktion mehrere Reihen einer Tabelle ansprechen, am liebsten wäre mir mit einer id.

Quasi per

PHP:

document.getElementById(id).style.display=hidden

mehrere Tabellenreihen ausblenden. Geht das? Oder kann man mehrere <tr>´s in ein <div>-Tag packen? Oder gibt es noch eine elegantere Variante?

Danke schonmal für eure Hilfe und ein erholsames Wochenende!

Quaese · 25. August 2007

Hi,

du könntest einen Klassenname in das class-Attribut schreiben, der angibt, ob die Zeile beim
Ausblenden berücksichtigt werden soll (im Bsp. weg). In einer Funktion ermittelst du zunächst
das Tabellenelement. In diesem durchläufst du alle Zeilen, prüfst ob der Klassename enthalten
ist und blendest das Element eventuell aus.

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">
<style type="text/css">
  <!--
.weg{}
.blau{ background: #369;}
.rot{ background: #a33;}
.orange{ background: #fa0}
.veilchenweg{ background: #96a;}
.schrift{ font-family: arial;
          font-size: 0.9em;
          font-weight: bold;
          color: #ccc;}
 //-->
</style>
<script type="text/javascript">
  <!--
function toggleRowsByClassName(strClassName, strTableId, blnShow){
  var objTable = document.getElementById(strTableId);

  // Alle Zeilen durchlaufen
  for(var i=0; i<objTable.rows.length; i++){
    // Falls der Klassenname gefunden wird
    if(objTable.rows[i].className.search(eval("/(^| )"+strClassName+"($| )/")) != -1){
      objTable.rows[i].style.display = (blnShow)? "" : "none";
    }
  }
}
 //-->
</script>
</head>
<body>
<table id="table_id">
  <tr class="orange weg"><td>Eins</td></tr>
  <tr class="blau"><td>Zwei</td></tr>
  <tr class="weg rot schrift"><td>Drei</td></tr>
  <tr class="veilchenweg"><td>Vier</td></tr>
  <tr class="weg"><td>Fünf</td></tr>
</table>
<button onclick="toggleRowsByClassName('weg', 'table_id', false);">verstecken</button>
<button onclick="toggleRowsByClassName('weg', 'table_id', true);">anzeigen</button>
</body>
</html>

Die JS-Funktion erwartet drei Parameter:
- strClassName: Name der Klasse, die ein Element für das Ausblenden markiert
- strTableId: ID der Tabelle, deren Zeilen ausgeblendet werden sollen
- blnShow: true = anzeigen / false = ausblenden

Ciao
Quaese

Mehrere Tabellenreihen gleichzeitig ansprechen

mammuteffect

Mitglied

Quaese

Moderator

Neue Beiträge