dynamisch ändern css-Klasse mit js

Ich habe ein problem beim versuchen, dynamisch zu ändern, eine Tabelle Zelle styling-Klasse mit JavaScript.

Folgendes Problem tritt auf FF, ich öffnete die Seite auf anderen Browsern auch und es funktionierte gut.

Ich habe eine html-Seite, die enthält eine 4x4-Tabelle. Ich möchte wenn ich auf eine Zelle klicken, um ihn zu vergrößern und wenn ich drauf klicke erneut, um die zoom-out. Ich definierte 2 CSS-Klassen, eine für die normale Größe der Zelle und eine für das gezoomte Zelle. Ich bin mit JS ändern, die CSS-Klasse, wenn eine Zelle angeklickt wird.

Das Problem mit FF ist, dass beim Wechsel von zoomClass zu normalClass alle Zellen rechts von der angeklickten Zelle nach rechts verschoben...

Ich kann nicht finden, eine Lösung oder ein workaround für dieses problem, wenn jemand eine Idee hat, bitte postet Sie hier.

Als Nächstes werde ich befestigen Sie die html -, css-und js-Dateien.

Dank 🙂

util.js


function zoom(id) {

    if (document.getElementById(id).className == "zoomClass") {

        document.getElementById(id).className = "normalClass";

    } else {

        document.getElementById(id).className="zoomClass";

    }

}

calendar.css


table, td, th, tr {
    border-color:#D2D3D4;
    border-style:solid;
    border-width:2px;
}

#main_table {
    border-spacing:1px;
    height:450px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:30px;
    width:850px;
}

td.normalClass {
    padding:0;
    font-size:4px;
    color:#3333FF;
}

td.zoomClass {
    display:inline;
    position:absolute;
    width:320px;
    height:240px;
    z-index:100;
    font-size:18px;
}

test.html

<!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=UTF-8" />

    <link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
    <script type="text/javascript" src="js/util.js"></script>
</head>

<body>
<div>
    <div>
        <table id="main_table">
            <tr>
                <td id="1" onclick="zoom(1)" align="right" valign="top" class="normalClass"></td>
                <td id="2" onclick="zoom(2)" align="right" valign="top" class="normalClass"></td>
                <td id="3" onclick="zoom(3)" align="right" valign="top" class="normalClass"></td>
                <td id="4" onclick="zoom(4)" align="right" valign="top" class="normalClass"></td>
            </tr>
            <tr>
                <td id="6" onclick="zoom(6)" align="right" valign="top" class="normalClass"></td>
                <td id="7" onclick="zoom(7)" align="right" valign="top" class="normalClass"></td>
                <td id="8" onclick="zoom(8)" align="right" valign="top" class="normalClass"></td>
                <td id="9" onclick="zoom(9)" align="right" valign="top" class="normalClass"></td>
            </tr>
            <tr>
                <td id="10" onclick="zoom(10)" align="right" valign="top" class="normalClass"></td>
                <td id="11" onclick="zoom(11)" align="right" valign="top" class="normalClass"></td>
                <td id="12" onclick="zoom(12)" align="right" valign="top" class="normalClass"></td>
                <td id="13" onclick="zoom(13)" align="right" valign="top" class="normalClass"></td>
            </tr>
            <tr>
                <td id="14" onclick="zoom(14)" align="right" valign="top" class="normalClass"></td>
                <td id="15" onclick="zoom(15)" align="right" valign="top" class="normalClass"></td>
                <td id="16" onclick="zoom(16)" align="right" valign="top" class="normalClass"></td>
                <td id="17" onclick="zoom(17)" align="right" valign="top"     class="normalClass"></td>
            </tr>
        </table>
    </div>
</body>

</html>

haben Sie ein live-Beispiel?

InformationsquelleAutor fmoga | 2009-12-10

1

Leider "position" funktioniert nicht auf Zellen einer Tabelle. Sie könnten versuchen, setzen einen div in die Tabellenzelle und die Positionierung, der.

Edit: so Etwas sollte den trick tun:
```
td.normalClass div { 
    display: none; 
} 
td.zoomClass div { 
    display: block; 
    position: absolute; 
    width: 320px; 
    height: 240px; 
}
```
Stellen Sie sicher, dass die div ist das erste, was in den td und es wird sich in der td's oben Links in der Ecke. Möglicherweise müssen Sie spielen mit relativer Positionierung auf den td wenn Sie Sie brauchen, um die top und left-Werte weiter.
- Können Sie mir sagen, was wären die änderungen an der css?
- So etwas sollte den trick tun: td.normalClass div { display: none; } td.zoomClass div { display: block; position: absolute; width: 320px; height: 240px; }. Möglicherweise müssen Sie spielen mit relativer Positionierung auf den td, wenn Sie Sie brauchen, um die top und left-Werte der div.
InformationsquelleAutor Olly Hodgson
1

Dies ist, wie Tabellen funktionieren. Ich möglich, würde ich versuchen und tun die gleiche Sache mit divs und dann Sie sollten in der Lage sein, das problem zu behandeln mit position:absolute, damit die erweiterten div-overlay über den anderen. Dies könnte die gleiche Arbeit für eine Zelle der Tabelle.
- Sind Sie darauf hindeutet, Sie zu ersetzen td mit divs?
- Konnte Sie ein div in jede Zelle ein - /ausblenden, wenn Sie die zoom-Sache.
InformationsquelleAutor matpol
1

Ein paar Kommentare zu deinem code, wenn ich darf. Ich würde immer das layout in der CSS-Datei und nicht in der HTML -, so würde ich entfernen Sie alle diese align="Recht" und valign="top". Auch können Sie auf die Zellen in der Tabelle sehr viel effizienter. Dann werden Sie nicht haben, um die Klasse für jede Zelle.
```
#main_table td{
    padding:0;
    font-size:4px;
    color:#3333FF;
}
```
Ich würde auch alle behalten, die nicht dem Verhalten der Seite in eine separate Skript-Datei (Javascript). Also nicht mehr " onclick="zoom(x)" in jeder Zelle. Können Sie Veranstaltung verbindlich zu machen.

Auch, wenn Sie mit der Veranstaltung verbindlich, Sie kann nur "Lesen" die id des angeklickten Zelle, so dass Sie nicht haben, um passieren, dass der Wert in statisch im Aufruf der zoom-Funktion.

Schließlich: kann ich empfehlen, mit jQuery zu tun diese Art der DOM-manipulation, da ist es viel einfacher, den code kürzer und besser lesbar und Ihre Skripte funktionieren in allen Browsern so ziemlich out of the box.

Ich habe nicht eine Lösung für dieses spezifische problem aber mit jQuery ist es ziemlich einfach, legen Sie ein neues DOM-element ein div-beispielsweise mit dem Inhalt der angeklickten Zelle, schweben über dem Tisch, und simulieren Sie die zoom-in-Effekt. Das div wäre absolut positionierbar und kann gestylt werden, viel besser als die Zelle der Benutzer geklickt auf.

InformationsquelleAutor Niels Bom

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.