JS fuer Display "Inline" oder "none"

S

Shugen

Grünschnabel
Hallo Leute.

Ich brauch mal eure Hilfe in Sachen Javascript.
Hier also das Problem. Ich hab eine Seite, dort habe ich eine Tabelle mit z.B. 8 Eintraegen. Nun moechte ich via Button-Klick das dann so machen, das dann nur die ersten 5 Eintraege angezeigt werden (hat den Sinn, weil ich nur 1 Seite benutzen moechte. Dieser Script soll dann sowas wie "das Aktuelleste" werden). Ich weiss, ich koennte die Spalten direkt ansprechen, aber mir geht es darum, das immer nur die ersten 5 Eintraege angezeigt werden, auch wenn ich spaeter die Tabelle um Spalten erweitere. Das heisst also, ich muesste das in einem Array machen, der mir immer nur die ersten 5 Eintraege anzeigt.

Hier mal ein Ansatz von mir (warscheinlich aber vollkommen falsch), in dem ich es so probiert habe, das die ersten 5 Spalten dann auf "inline" gesetzt werden:

Code: 
<html>
<head>

<script language ="Javascript">
 <!--
 function topfive(Anzahl)
 {
  var i;

  for (i = 0; i < Anzahl; i++)
    {
    if (document.getElementByName)

  document.getElementByName("topten[]")[i].style.display = inline;
    }
 }
 // --->



</script>

</head>
<body>
<table>
<tr name="topten[]" style="display:none">
<td>1</td>
</tr>
<tr name="topten[]" style="display:none">
<td>2</td>
</tr>
<tr name="topten[]" style="display:none">
<td>3</td>
</tr>
<tr name="topten[]" style="display:none">
<td>4</td>
</tr>
<tr name="topten[]" style="display:none">
<td>5</td>
</tr>
<tr name="topten[]" style="display:none">
<td>6</td>
</tr>
<tr name="topten[]" style="display:none">
<td>7</td>
</tr>
<tr name="topten[]" style="display:none">
<td>8</td>
</tr>
</table>
<input type="Button" name="knopf" value="Drücken" onclick="topfive(5)"><br>
</body>
</html>

Wenn ich den eben gepostetet script ausfuehre, passiert aber nix,es kommt aber auch keine Fehlermeldung.
Koennte mir also jemand sagen, was an diesem script falsch ist oder mir einem anderen Loesungsansatz posten?

Ich danke euch jetzt schonmal fuer eure Hilfe.

Greetz, Shugen
 
Hi,

die Methode, um Elemente über ihren Namen anzusprechen lautet

&nbsp;&nbsp;getElementsByName().

Damit ist Dein Problem jedoch nicht zu lösen. Du könntest aber statt Namen IDs
in die tr-Tags schreiben. Wenn Du die IDs durchnummerierst, kannst Du sie im
Script mit einer for-Schleife durchlaufen.
Code: 
 function topfive(Anzahl){
    var i;

    for (i = 0; i < Anzahl; i++){
        strID = "id" + i;
        if (document.getElementById(strID))
            document.getElementById(strID).style.display = 'inline';
    }
 }
Den HTML-Teil musst Du wie folgt anpassen:
Code: 
<table>
    <tr id="id0" name="topten[]" style="display:none">
        <td>1</td>
    </tr>
    <tr id="id1" name="topten[]" style="display:none">
        <td>2</td>
    </tr>
    <tr id="id2" name="topten[]" style="display:none">
        <td>3</td>
    </tr>
    ...
</table>
<input type="Button" name="knopf" value="Drücken" onclick="topfive(5)">
Es ist zu beachten, dass die Nummerierung der IDs bei Null beginnt.

Ciao
Quaese
 
Grossen Dank erstmal...

Ich danke dir fuer deine schnelle Antwort =) Funktioniert top.

Nenn kleines Problem hab ich jetzt aber noch. Wie kann ich es realiesieren, das immer die ersten 5 Spalten ein und ausgeblendet werden? Denn wenn ich jetzt meine Tabelle erweitern wuerde, muesste ich ja der neuen Spalte auch eine ID geben, und da ja das "aktuellste" immer oben in die Tabelle kommt, muesste man jedes mal die Durchnummerierung der ID aendern, damit das Script wirklich immer die ersten 5 Spalten anspricht.

Meine Frage daher: Ist es also moeglich, das ein Script vorher immer die ID selbst vergibt, abhaengig von der Anzahl der Spalten, damit wirklich immer die ersten 5 Spalten die ID's -> id0,id1 usw. haben? Oder gbit es eine andere vielleicht einfachere Loesung...

Greetz, Shugen
 
Hi,

dann also ein völlig neuer Lösungsansatz.

Es ist möglich, die Tabelle über die Knotenstruktur zu durchlaufen. Hierzu wird zuerst
der TBODY mit Hilfe seiner ID ausgelesen. Anschliessend werden seine Kindknoten
durchlaufen und entsprechend verändert.

Zuerst muss die Tabellenstruktur angepasst werden, indem ein TBODY-Tag mit
ID notiert wird. name- und id-Attribute können entfallen, sofern sie nicht anderweitig
benötigt werden.
Code: 
<table>
    <tbody id="tbodyID">
        <tr style="display:none">
            <td>1</td>
        </tr>
        <tr style="display:none">
            <td>2</td>
        </tr>
        ...
    </tbody>
</table>
Das modifizierte Script sieht folgendermassen aus:
Code: 
function topX(intStart){
    var j = 0;
    // TBody-Objekt der Tabelle holen
    var objNode = document.getElementById("tbodyID");

    // Alle Kindknoten durchlaufen
    for(i=0; i<objNode.childNodes.length; i++){
        // Falls es sich um einen TR-Tag handelt (wegen Mozilla notwendig)
        if(objNode.childNodes[i].nodeName == "TR"){
            // Falls die Zeilen angezeigt werden sollen
            if(j < intStart){
                // Kindknoten (tr) einblenden
                objNode.childNodes[i].style.display = 'inline';
                j++;  // Zähler inkrementieren
            }else{
                // Kindknoten (tr) ausblenden
                objNode.childNodes[i].style.display = 'none';
            }
        }
    }
}
Die Funktion erwartet als Parameter einen Integerwert, der die Anzahl der Spalten
angibt, die eingeblendet werden sollen.

&nbsp;&nbsp;<input type="Button" name="knopf" value="Top5" onclick="topX(5);">

würde die ersten fünf Spalten einblenden.

Ciao
Quaese
 
Also...

Man, du hast ja wat auf'm Kasten, Danke. Das ist das, was ich gesucht hab!
1000 Danke fuer deine schnelle Hilfe.

Greetz, Shugen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück