XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript (http://xhtmlforum.de/showthread.php?t=52810)

chrisol_76 21.07.2008 16:08

Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript
 
Hallo zusammen,

in dem HTML-Code ganz unten möchte ich gerne mehrere Spalten ein und ausblenden.
Momentan sieht es so aus als würde es mit dem Internet Explorer 6
funktionieren, aber mit Opera und Firefox habe ich ein paar Probleme.

Durch drücken auf den Button "toggle" werden ein paar Spalten via CSS und JavaScript ein-/ausgeblendet.

Zusammenfassung JavaScript für Mozilla und Opera
ausblenden
Code:

document.styleSheets[0].cssRules[0].style.setProperty("display", "none", "");
einblenden inline
Code:

document.styleSheets[0].cssRules[0].style.setProperty("display", "inline", "");

1. Problem :
betrifft Opera und Mozilla
Die Spalten "block1" und "block2" und die Spalten "inline1" und "inline2" werden zusammengefasst

2. Problem :
betrifft Mozilla
durch mehrmaliges drücken des Buttons (ein-/ausblenden der Spalte) verschiebt sich alles rechts neben der ein/ausgeblendeten Spalte nach rechts


Was mache ich falsch?
Kann mir jemand weiterhelfen?

Chris


Hier ist der HTML-Code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

        <title>Test Tabelle</title>

        <style>

        .MyColumn1
        {
                color : blue;
                display : block;
        }

        .MyColumn2
        {
                color : red;
                display : block;
        }

        .MyColumn3
        {
                color : red;
                display : inline;
        }

        .MyColumn4
        {
                color : red;
                display : inline;
        }

        </style>



        <script type="text/javascript" language="javascript">

        function GetRule(AStyleSheetIndex, ARuleIndex)
        {// keine Ueberpruefung ob Stylesheet oder Regel existieren
        var oStyleSheets = document.styleSheets;
        var oStyleSheet = oStyleSheets[AStyleSheetIndex];
        var oRules;
        var oRule;


                if (oStyleSheet.cssRules)
                {
                        return oStyleSheet.cssRules[ARuleIndex];
                }
                else if (oStyleSheet.rules)
                {
                        return oStyleSheet.rules[ARuleIndex];
                }
                return null;
        }


        function GetAttribute(AStyleSheetIndex, ARuleIndex, AAttribute)
        {
        var oRule = GetRule(AStyleSheetIndex, ARuleIndex);

                if (oRule == null)
                        return "";

                if (oRule.style.getPropertyValue)
                {
                        return oRule.style.getPropertyValue(AAttribute);
                }
                else
                {
                        return oRule.style[AAttribute];
                }
        }


        function SetAttribute(AStyleSheetIndex, ARuleIndex, AAttribute, AValue)
        {
        var oRule = GetRule(AStyleSheetIndex, ARuleIndex);

                if (oRule == null)
                        return;

                if (oRule.style.setProperty)
                {
                        oRule.style.setProperty(AAttribute, AValue, "");
                }
                else
                {
                        oRule.style[AAttribute] = AValue;
                }
        }


        function Toggle_Column()
        {
        var strValue;
        var strAttribute;
        var iRuleIndex;

                strAttribute = "display";
                iRuleIndex = 0;

                strValue = GetAttribute(0, iRuleIndex, strAttribute);

                if ((strValue == null) || (strValue == "block"))
                {
                        strValue = "none";
                }
                else
                {
                        strValue = "block"; // "inline";
                }
                SetAttribute(0, 0, strAttribute, strValue);

                // ************************************************************************************

                strAttribute = "display";
                iRuleIndex = 1;

                strValue = GetAttribute(0, iRuleIndex, strAttribute);

                if ((strValue == null) || (strValue == "block"))
                {
                        strValue = "none";
                }
                else
                {
                        strValue = "block"; // "inline";
                }
                SetAttribute(0, iRuleIndex, strAttribute, strValue);

                // ************************************************************************************

                strAttribute = "display";
                iRuleIndex = 2;

                strValue = GetAttribute(0, iRuleIndex, strAttribute);

                if ((strValue == null) || (strValue == "inline"))
                {
                        strValue = "none";
                }
                else
                {
                        strValue = "inline"; // "inline";
                }
                SetAttribute(0, iRuleIndex, strAttribute, strValue);

                // ************************************************************************************

                strAttribute = "display";
                iRuleIndex = 3;

                strValue = GetAttribute(0, iRuleIndex, strAttribute);

                if ((strValue == null) || (strValue == "inline"))
                {
                        strValue = "none";
                }
                else
                {
                        strValue = "inline"; // "inline";
                }
                SetAttribute(0, iRuleIndex, strAttribute, strValue);


        }

        </script>

</head>
<body>

        <table>
          <thead>
            <tr id="row0">
              <th>00</th>
              <th class="MyColumn1">block1</th>
              <th class="MyColumn2">block2</th>
              <th>03</th>
              <th class="MyColumn3">inline1</th>
              <th class="MyColumn4">inline2</th>
              <th>06</th>
            </tr>
          </thead>
          <tbody>
            <tr id="row1">
              <th>10</th>
              <td class="MyColumn1">11</td>
              <td class="MyColumn2">12</td>
              <td>13</td>
              <td class="MyColumn3">14</td>
              <td class="MyColumn4">15</td>
              <td>16</td>
            </tr>
            <tr id="row2">
              <th>20</th>
              <td class="MyColumn1">21</td>
              <td class="MyColumn2">22</td>
              <td>23</td>
              <td class="MyColumn3">24</td>
              <td class="MyColumn4">25</td>
              <td>26</td>
            </tr>
          </tbody>
        </table>

        <form name="frmTest">
        <input type="button" value="toggle"  onclick="Toggle_Column();">

        </form>

        getestet mit folgenden Browsern unter Windows XP SP2
        <ul>
                <li>IE 6.0 (6.0.2900.2180)</li>
                <li>Mozilla Firefox 2.16 (Problem1 und Problem2)</li>
                <li>Opera 9.23 (Problem1)</li>
                <li>Amaya 10.0.1 (ohne JavaScript)</li>
        </ul>

        <ul>
                <li>1. Problem : <br>betrifft Opera und Mozilla
                        <br>die Spalten "block1" und "block2" und die Spalten "inline1" und "inline2" werden zusammengefasst
                </li>
                <li>2. Problem : <br>betrifft Mozilla
                        <br>durch mehrmaliges dr&uuml;cken des Buttons (ein-&frasl;ausblenden der Spalte) verschiebt alles rechts neben der ein&frasl;-ausgeblendeten Spalte nach rechts
                </li>
        </ul>

</body>
</html>


IChao 21.07.2008 16:47

In konformen Browsern haben Tabellenelemente nicht display-Werte von block oder inline, sondern die in CSS 2.1: 17.2 genannten display-Werte. Die von dir mit block/inline gesetzten Zellen werden zu je einer Zelle zusammengefasst in einem anonymen Tabellenelement untergebracht.

chrisol_76 21.07.2008 17:37

Vielen Dank,

der Link führte direkt zur Lösung.

Von den display-Werten für Tabellen hatte ich bisher nichts gehört.

Der Internet Explorer 6 gehört nicht zu den konformen Browsern , daher
werde ich ich mir mit einer Browserabfrage behelfen und beim IE6 weiter "block" oder "inline" benutzen und sonst "table-cell"

Ciao,
Chris


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022