✔ Auf Elemente in Form eines Array zugreifen

[Mik3e]

Hi zusammen,
stehe vor einem (für Euch wahrscheinlich banalen Problem):

Es gibt n-Zeilen in einer Tabelle, die Karteireiter repräsentieren (hier sind es drei):

<td class="subKarteiReiterActive" id="subKartei[0]"><a href="#">Allgemein</a></td>
<td class="subKarteiReiterInActive" id="subKartei[1]"><a href="#">Erweitert</a></td>
<td class="subKarteiReiterInActive" id="subKartei[2]"><a href="#">Historie</a></td>

Wie Ihr seht, gibt es zwei Style-Klassen die festlegen, ob ein Karteiereiter als "Aktiv" oder "Inaktiv" dargestellt werden soll (siehe Anhang).

Ich brauche nun ein JS, dass mir beim Klick auf einen der Karteireiter den angeklickten aktiviert (also .class="subKarteiReiterActive") und alle n-anderen deaktiviert (.class="subKarteiReiterInActive").

Mein Lösungsansatz ist die Elemente in einen Array zu packen (im Beispiel schon - wahrscheinlich falsch - angedeutet) um dann mit einer foreach() Schleife (ich glaub in JS gibts nur for()) alle Elemente außer dem Angeklickten zu deaktivieren und das Angeklickte zu aktivieren.

Wäre ja eigentlich nicht wirklich komplex, allerdings hänge ich im Moment dabei die Elemente als Array zu definieren, damit ich Sie dann mit getElementById() ansprechen kann. Bei Option-Feldern (mit gleichem Namen) werden die Array-Indizes ja automatisch vergeben (1. Element = [0], 2. Element = [1] etc.). Ich muss die Elemente aber manuell indizieren können!

Unterm Strich: Wie lege ich den Array-Index eines Elements manuell fest, um ihn mit getElementById ansprechen zu können!?

Ich hoffe mein Problem ist verständlich
Ciao,
Mike

 

[fish-guts]

Moin

Versuchs mal mit

document.forms["name"].elements[n].eigenschaft/methode

Dann kannst du einfach n inkrementieren.

Gruss

FG

 

[Mik3e]

Hi,

Ne, das wars leider nicht... Ich vermute die Notation der Array-Indizes im Quellcode ist einfach falsch ("[n]"). Ich kann mich düster erinnern, dass man Elemente in dieser Form nicht als JS-konformen Array definieren kann.

Abgesehen davon sind die Elemente nicht in einem <form> ...

Hast Du noch ne andere Idee? Bin leider eine echte JS-Null und auch stolz darauf Wie ich diese Scriptsprache doch hasse.....

Ciao,
Mike

 

[fish-guts]

Moin

Wenn ich dich richtig verstanden habe, willst du, dass beim Anklicken eines Reiters, alle andern wieder deaktiviert werden.

Wenn das so ist, schreib eine Funktion die du immer als erstes beim Klick aufrufst, mit der du ALLE zunächst deaktivierst. Gleichzeitig rufst du die Aktivierungsfunktion auf.

//edit

Was ich meine ist z.B. folgendes:

var subs=new Array('sub1','sub2');
function hideall()
{
		for(x=0; x<subs.length;x++)
	{
		document.getElementById(subs[x]).style.visibility='hidden';
	}
}

Hab das mal so mit einem Menu gemacht.



Gruss


FG

 

[Mik3e]

Ja, genau so möchte ich es..
ABER:
Was ist "alle"? Das weißt Du im voraus nicht, da es ja n-Karteireiter sein können (3 oder 200)...

Und genau deshalb möchte ich die Elemente als Array deklarieren um sie dann per count() (k.a. ob sowas in JS möglich ist) und for() durchzulaufen und zu deaktiveren.

Wenn die Elemente immer fix definiert wären, wärs ja kein Problem...

Ciao,
Mike

 

[fish-guts]

Moin

Dann würde ich dir empfehlen, ein Formular einzubauen.

Dann kannst du nämlich mit

  document.forms["formularname"].elements[n]

darauf zugreifen. Es wird dann immer das nte Element angesprochen.

Dann erstellst du eine Variabel, die mitzählt, dann hast du den Wert.

Gruss

FG

 

[Mik3e]

Hi,

Geht aus folgenden Gründen nicht:
1) Sind in dem Formular noch viele andere Elemente (die dann fälschlicherweise auch indiziert sind)
2) Glaube ich bezieht sich .elements nur auf <input> Elemente (aber da bin ich mir nicht sicher

Kann ja nicht sein, dass es hierfür keine Lösung gibt!? Obwohl JS traue ich alles zu...

Danke & Ciao,
Mike

 

[Quaese]

Hi,

vielleicht helfen dir die JS-Objekte rows und cells weiter.

Du könntest einer Funktion das Objekt der aufrufenden Zelle als Parameter übergeben. Von diesem
ausgehend ermittelst du das Elternelement - ist eine Zeile (row). Innerhalb dieser Zeile durchläufst
du alle Zellen und vergleichst, ob es sich um die auslösende Zelle gehandelt hat. War es das auslösende
Element, setzt du die aktive Klasse, in den anderen Fällen die inaktive.

Beispiel:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
  <!--
table{ padding: 0;
       border-right: 1px solid #000;
       border-top: 1px solid #000;}
table td{ padding: 3px 6px;
          border-left: 1px solid #000;
          border-bottom: 1px solid #000;}
.subKarteiReiterActive{ background: #ffffc0;}
.subKarteiReiterInActive{ background: #fff;}
 //-->
</style>
<script type="text/javascript">
  <!--
function updateNavi(objAktCell){
  // Tabellenzelle ermitteln
  var objRow = objAktCell.parentNode;
  for(var i=0; i<objRow.cells.length; i++){
    // Falls es sich um die auslösende Zelle handelt
    if(objRow.cells[i] == objAktCell){
      objRow.cells[i].className = "subKarteiReiterActive";
    }else{
      objRow.cells[i].className = "subKarteiReiterInActive";
    }
  }
}
 //-->
</script>
</head>
<body>
<table>
  <tr>
    <td class="subKarteiReiterActive" onclick="updateNavi(this);">first</td>
    <td class="subKarteiReiterInActive" onclick="updateNavi(this);">second</td>
    <td class="subKarteiReiterInActive" onclick="updateNavi(this);">third</td>
  </tr>
  <tr><td colspan="3">Inhalt</td></tr>
</table>
</body>
</html>

Ciao
Quaese

 

[Mik3e]

Hi,

Die Lösung gefällt mir sehr gut So würde ich das gerne umsetzen..
Das Problem dabei:
Meine Tabelle hat noch eine letzte Zelle, die nicht verändert werden darf (die stellt die schlusslinie dar):

<tr>
  <td class="subKarteiReiterActive" name="test1" onclick="updateNavi(this);">Allgemein</td>
  <td class="subKarteiReiterInActive" name="test2" onclick="updateNavi(this);">Erweitert</td>
  <td class="subKarteiReiterInActive" name="test3" onclick="updateNavi(this);">Historie</td>
  <td class="subKarteiReiterFinalNoReiter" name="noedit">&nbsp;</td>
</tr>

Kann man in die Schleife noch eine Abfrage einbauen, die nur dann Änderungen ausführt, wenn der name der Zelle<>"noedit" ist? Ich habs versucht, kriegs aber nicht gebacken...

So funktionierts mal nicht:

alert(objRow.cells[i].name);

Liefert "Undefined".

Ciao,
Mike

 

[Quaese]

Hi,

du musst einfach die Zählvariable in der for-Schleife einmal weniger inkrementieren.

for(var i=0; i<(objRow.cells.length-1); i++)

Ciao
Quaese