Zu den Aufzeichnungen der tutorials.de-Live-Workshops
Seite 1 von 2 12 LetzteLetzte
ERLEDIGT
JA
ANTWORTEN
24
ZUGRIFFE
14818
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.05.06 11:39 #1
    Avatar von Mik3e
    Mik3e Mik3e ist offline Mitglied Platin
    Registriert seit
    May 2005
    Beiträge
    732
    Hi zusammen,

    Hab mal wieder Mühe mit JS (wie ich es hasse
    Hab eine Tabelle mit mehreren Zeilen. In jeder zweiten zeile befindet sich wiederum eine Tabelle.

    In der führenden Zeile gibt es nun einen Link "ein-ausblenden", der die darunterliegende Zeile (mit der Tabelle) ein- bzw. ausblenden soll (typisches "aufklappen").

    Mein Problem:
    Ausblenden klappt super aber beim Einblenden zerstört mir das JS die komplette Formatierung. Es dürfte irgendwas mit den Display Eigenschaften "block" und "none" zu tun haben. Habe auch schon mehrere Varianten versucht (zB mit expliziter Definition der Colspan) aber ich kriegs einfach nicht hin.

    Ist für einen JS Guru hier (Sven!? sicher nur ein kurzer Hingucker um die Lösung zu finden.

    Seht Euch das nachfolgende Beispiel an, dann wirds klarer (die rote Zeile gehört jeweils durch die darüberliegende ausgeblendet).

    Demo-File zum Testen:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
// <![CDATA[

function setVisibility(rowName) {
	// Tabellenzelle ermitteln
	
	var actualVisibility=document.getElementById(rowName).style.visibility;

	if(actualVisibility=='' || actualVisibility=='visible') {
		document.getElementById(rowName).style.visibility = "hidden";
		document.getElementById(rowName).style.display = "none";
	} else {
		document.getElementById(rowName).style.visibility = "visible";
		document.getElementById(rowName).style.display = "block";
	}
}
// ]]>
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<table width="200" border="1" cellpadding="2">
  <tr>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 1  </span></td>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 2 </span></td>
    <td width="100%" nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 3 </span></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow1')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow1" name="testrow1">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>x2</td>
        <td>2</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow2')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow2" name="testrow2">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>x4</td>
        <td>4</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
    Ich teste das ganze derzeit mit Firefox... Sollte im IE klarerweise dann auch funktionieren..

    Danke Euch im Voraus,
    Ciao,
    Mike
     
    Zitieren Zitieren
  2. 22.05.06 12:27 #2
    Avatar von Gumbo
    Gumbo Gumbo ist offline
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Probier mal den Wert „table-row“ oder eine leere Zeichenkette statt des Werts „block“. Bei letzterem sollten die Browser den Standardeigenschaftswert des Elements anwenden. Übrigens ist es überflüssig beide Eigenschaften (display und visibility) zu ändern.
     
    Markus Wulftange
    Zitieren Zitieren
  3. 22.05.06 14:27 #3
    Avatar von Mik3e
    Mik3e Mik3e ist offline Mitglied Platin
    Registriert seit
    May 2005
    Beiträge
    732
    Im IE klappts wunderbar mit "block" und "none".
    Allerdings kennt der IE die Display Eigenschaft "table-row" nicht...

    Das Problem liegt irgendwo beim Colspan. Denn wenn Firefox die Zeile wieder erneut einblendet, "quetscht" er sie innerhalb die erste Zelle der darüberliegenden Tabelle...

    Das display zusätzlich ist notwendig, damit er die nachfolgenden Zellen nach oben zieht (und kein leerer Platzhalter bleibt).

    Hast du noch ne Idee?
     
    Zitieren Zitieren
  4. 22.05.06 14:29 #4
    Avatar von Mik3e
    Mik3e Mik3e ist offline Mitglied Platin
    Registriert seit
    May 2005
    Beiträge
    732
    Ahh.. mit der leeren Zeichenkette hats nun geklappt... Ist mir zwar nicht verständlich, aber danke jedenfalls

    Ciao,
    Mike
     
    Zitieren Zitieren
  5. 22.05.06 16:48 #5
    Avatar von Gumbo
    Gumbo Gumbo ist offline
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Das Tauschen der visibility-Eigenschaft ist nicht nötig. Denn die visibility-Eigenschaft regelt nur die Sichtbarkeit des Elements, die display-Eigenschaft regelt hingegen die Darstellungsform eines Elements.
     
    Markus Wulftange
    Zitieren Zitieren
  6. 27.06.06 22:18 #6
    Avatar von Tucker
    Tucker Tucker ist offline Mitglied Brokat
    Registriert seit
    Mar 2004
    Ort
    Riesa
    Beiträge
    428
    Hi,
    ich hab mir zwar geschworen mich nie wirklich intensiv mit JS zu beschäftigen, allerdings lässt sich das nun nicht mehr umgehen. Ich habe ein gleichartiges Problem. Ich will über eine Selectbox verschiedene Inhalte anzeigen lassen und andere wiederum ausblenden.
    Dazu habe ich folgendes Script geschrieben:

    Code javascript:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    function show_tabelle ( uebergabe )
{
    // array
    var ids = new Array ( "1maenner", "2maenner", "1frauen" );
    // ende-array
    
    for ( i = 0 ; i < ids.length ; i++ )
    {
        //for ( z = 3 ; z < elems.length ; z++ )
        
        if ( document.getElementById(ids[i]).id == uebergabe )
        {
            document.getElementById(ids[i]).style.display = '';
        }
        else
        {
            document.getElementById(ids[i]).style.display = 'none';
        }
    }
}

    Dieses Script funktioniert bei Opera wunderbar. Im IE passiert gar nichts. Kann mir jemand sagen, woran das liegt?

    P.S.: Irgendwie mag mich IE nicht mehr. Alles was in allen anderen Browsern , funktioniert heute nicht im IE.
     
    Wenn man der freudschen psychosexuellen Theorie über Eros und Tanatos glaubt, bleibt eine unbeantwortbare Frage: Was hat Programmieren mit der Libido und sexueller Befriedigung zu tun?
    Zitieren Zitieren
  7. 27.06.06 22:32 #7
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Kannst du mal die "Inhalte" dazu zeigen?
    Rein von der Logik her sollte diese Funktion nur 1mal Änderungen verursachen, da
    Code :
    1

    if ( document.getElementById(ids[i]).id == uebergabe )
    ...natürlich nie zutreffen wird.
     
    Zitieren Zitieren
  8. 27.06.06 22:37 #8
    Avatar von Tucker
    Tucker Tucker ist offline Mitglied Brokat
    Registriert seit
    Mar 2004
    Ort
    Riesa
    Beiträge
    428
    So würde ein Element aussehen:

    HTML-Code:
    <table id="2maenner"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
						<tr>
							<th align="center">
								Platz
							</th>
							<th align="center">
								Mannschaft
							</th>
							<th align="center">
								Punkte
							</th>
							<th>
								Spiele
							</th>
						</tr>
						<tr>
							<td align="center">
								1
							</td>
							<td align="center">
								TSV R&auml;hnitz
							</td>
							<td  align="center">
								20:0
							</td>
							<td>
								10
							</td>
						</tr>
						<tr>
							<td align="center">
								...
							</td>
							<td>
							
							</td>
							<td>
							
							</td>
							<td>
							
							</td>
						</tr>
						<tr>
							<td align="center">
								9
							</td>
							<td  align="center">
								Planeta Radebeul
							</td>
							<td  align="center">
								2:18
							</td>
							<td>
								10
							</td>
						</tr>
						<tr style="font-weight: bold;">
							<td align="center">
								10
							</td>
							<td align="center">
								SSV Lommatzsch
							</td>
							<td  align="center">
								0:20
							</td>
							<td>
								10
							</td>
						</tr>
					</table>
    Sind halt noch mehr solcher kleiner Tabellen.
     
    Wenn man der freudschen psychosexuellen Theorie über Eros und Tanatos glaubt, bleibt eine unbeantwortbare Frage: Was hat Programmieren mit der Libido und sexueller Befriedigung zu tun?
    Zitieren Zitieren
  9. 27.06.06 23:48 #9
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Mmmh...ist natürlich Quatsch...meine Bemerkung mit der Logik
    bei mir haut das hin, so wie du es hast...
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

    <html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
      function show_tabelle ( uebergabe )
      {
          // array
          var ids = new Array ( "1maenner", "2maenner", "1frauen" );
          // ende-array
         
          for ( i = 0 ; i < ids.length ; i++ )
          {
              if ( document.getElementById(ids[i]).id == uebergabe )
              {
                  document.getElementById(ids[i]).style.display = '';
              }
              else
              {
                  document.getElementById(ids[i]).style.display = 'none';
              }
          }
      } 
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<b onclick="show_tabelle('1frauen')">1frauen</b><br>
<table border="1" id="1frauen"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
 <tr>
  <th align="center">
    1frauen
  </th>
 </tr>
</table>
<b onclick="show_tabelle('1maenner')">1maenner</b><br>
<table border="1" id="1maenner"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
 <tr>
  <th align="center">
    1maenner
  </th>
 </tr>
</table>
<b onclick="show_tabelle('2maenner')">2maenner</b><br>
<table border="1" id="2maenner"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
 <tr>
  <th align="center">
    2maenner
  </th>
 </tr>
</table>
</body>
</html>
    ...die einzige Unstimmigkeit, welche ich sehe, ist die Tatsache, dass die IDs mit einer Ziffer beginnen...die sollte das aber nicht zum Scheitern bringen.
     
    Zitieren Zitieren
  10. 28.06.06 00:14 #10
    Avatar von Tucker
    Tucker Tucker ist offline Mitglied Brokat
    Registriert seit
    Mar 2004
    Ort
    Riesa
    Beiträge
    428
    Bei mir funktioniert es komischerweise nicht. Aber schau mal bei mir: http://www.ssvlommatzsch.de/cvs/index.html
    Bei der Sparte Tabellenuebersicht ist das Script eingebunden.
     
    Wenn man der freudschen psychosexuellen Theorie über Eros und Tanatos glaubt, bleibt eine unbeantwortbare Frage: Was hat Programmieren mit der Libido und sexueller Befriedigung zu tun?
    Zitieren Zitieren
  11. 28.06.06 00:24 #11
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Ahso...es liegt an der Selectbox, der IE interpretiert kein onclick in <option>

    Schreibs so:
    Code :
    1
2
3
4
5
6
7

    <select name="tabellenuebersicht" onchange="show_tabelle(this.value)">
   <option>Mannschaft...</option>
  <option>----------------------</option>
  <option value="1maenner">1. M&auml;nner</option>
  <option value="2maenner">2. M&auml;nner</option>
  <option value="1frauen">1.Frauen</option>
</select>
     
    Zitieren Zitieren
  12. 28.06.06 00:33 #12
    Avatar von Tucker
    Tucker Tucker ist offline Mitglied Brokat
    Registriert seit
    Mar 2004
    Ort
    Riesa
    Beiträge
    428
    Vielen Dank. Jetzt funktioniert es. Na ja, werd versuchen mich weiter dahinter zu klemmen.
     
    Wenn man der freudschen psychosexuellen Theorie über Eros und Tanatos glaubt, bleibt eine unbeantwortbare Frage: Was hat Programmieren mit der Libido und sexueller Befriedigung zu tun?
    Zitieren Zitieren
  13. 08.02.10 19:54 #13
    Brunni Tutorials.de Gastzugang
    Hallo,

    hab eine kurze Frage. Hab obigen Quellcode (den obersten) genommen um Tabellen ein und ausblenden zu können. Am Anfang ist die Tabelle jedoch sichtbar und wird dann auf einen Klick versteckt. Ich hätte aber gerne die Tabelle versteckt und beim klick soll sie erscheinen. Was muss ich ändern?

    Tschüß

    Brunni
     
    Zitieren Zitieren
  14. 08.02.10 20:26 #14
    Maik Tutorials.de Gastzugang
    Hi,
    Zitat Zitat von Brunni Beitrag anzeigen
    Hallo,

    hab eine kurze Frage. Hab obigen Quellcode (den obersten) genommen um Tabellen ein und ausblenden zu können. Am Anfang ist die Tabelle jedoch sichtbar und wird dann auf einen Klick versteckt. Ich hätte aber gerne die Tabelle versteckt und beim klick soll sie erscheinen. Was muss ich ändern?

    Tschüß

    Brunni
    Die wichtigen Zeilen / Passagen sind hier fett markiert:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
// <![CDATA[
 
function setVisibility(rowName) {
        // Tabellenzelle ermitteln
 
        var actualVisibility=document.getElementById(rowName).style.visibility;
 
        if(actualVisibility=='' || actualVisibility=='visible') {
                document.getElementById(rowName).style.visibility = "hidden";
                document.getElementById(rowName).style.display = "none";
        } else {
                document.getElementById(rowName).style.visibility = "visible";
                document.getElementById(rowName).style.display = ""; [b]/* den display-Wert block hab ich entfernt, da dies in dem einen oder anderen Browser zu Darstellungsproblemen führt, und der Grund dieses Themas war */[/b]
        }
}
// ]]>
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
 
<body>
<table width="200" border="1" cellpadding="2">
  <tr>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 1  </span></td>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 2 </span></td>
    <td width="100%" nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 3 </span></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow1')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow1" name="testrow1" [b]style="visibility:hidden;display:none;"[/b]>
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>x2</td>
        <td>2</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow2')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow2" name="testrow2" [b]style="visibility:hidden;display:none;"[/b]>
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>x4</td>
        <td>4</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>


    mfg Maik
     
    Zitieren Zitieren
  15. 09.02.10 00:04 #15
    Brunni Tutorials.de Gastzugang
    Hallo,

    super, besten Dank, hat wunderbar geklappt. Eine Frage noch. Ist es normal, dass er dann beim ein- bzw. ausblenden ganz nach oben auf die Seite springt, oder kann man das auch verhindern?

    Tschüß

    Brunni
     
    Zitieren Zitieren
« Javascript & Ajax Buch | Problem mit innerHTML im Internet Explorer »

Ähnliche Themen

  1. MYSQL Zeile einer Tabelle mittels VB.net in eine andere Tabelle kopieren
    Von bierber im Forum .NET Datenverwaltung
    Antworten: 1
    Letzter Beitrag: 05.05.07, 19:44
  2. Jede n. zeile einer Tabelle / einer Ergebnismenge auslesen
    Von janw im Forum Relationale Datenbanksysteme
    Antworten: 1
    Letzter Beitrag: 09.08.05, 11:53
  3. Bestimmte Zeile einer Tabelle anhand eines Datensatzes ausblenden
    Von FlowersBeheaded im Forum Relationale Datenbanksysteme
    Antworten: 2
    Letzter Beitrag: 12.01.05, 16:25
  4. Fehler beim adden/löschen einer Zeile in einer Tabelle
    Von skynic im Forum PHP
    Antworten: 3
    Letzter Beitrag: 29.07.04, 12:57
  5. Beim Anklicken einer Zeile einer Tabelle...
    Von shapeless im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 11.10.03, 19:47