1

JavaScriptを使用してテーブルセルのスタイルクラスを動的に変更しようとすると問題が発生します。

次の問題はFFで発生します。他のブラウザでもページを開いたところ、正常に機能しました。

4x4のテーブルを含むhtmlページがあります。セルをクリックしてズームインし、もう一度クリックしてズームアウトしたいのですが。2つのCSSクラスを定義しました。1つは通常サイズのセル用で、もう1つはズームされたセル用です。セルがクリックされたときにCSSクラスを変更するためにJSを使用しています。

FFの問題は、zoomClassからnormalClassに変更すると、クリックしたセルの右側にあるすべてのセルが右側にシフトすることです...

この問題の解決策や回避策が見つかりません。誰かがアイデアを持っている場合は、ここに投稿してください。

次に、html、css、jsファイルを添付します。

ありがとう ：）

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>
4

3 に答える 3

1

残念ながら、「位置」はテーブルセルでは機能しません。テーブルセル内にdivを配置し、それを配置してみてください。

編集：このような何かがトリックを行う必要があります：

td.normalClass div { 
    display: none; 
} 
td.zoomClass div { 
    display: block; 
    position: absolute; 
    width: 320px; 
    height: 240px; 
}

divが最初のものであることを確認してください。これは、の左上隅tdに配置されます。上と左の値をさらに変更する必要がある場合はtd、上の相対位置で遊ぶ必要があるかもしれません。td

于 2009-12-10T10:33:19.307 に答える
1

可能であれば、あなたのコードに関するいくつかのコメント。レイアウトはHTMLではなくCSSファイルに保持するので、これらのalign="right"とvalign="top"をすべて削除します。また、テーブル内のセルをはるかに効率的に参照できます。そうすれば、セルごとにクラスを設定する必要がなくなります。

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

また、ページのすべての動作を別のスクリプトファイル（Javascript）に保持します。したがって、すべてのセルでonclick = "zoom（x）"は不要になります。イベントバインディングを使用してそれを行うことができます。

また、イベントバインディングを使用する場合は、クリックしたセルのIDを「読み取る」ことができるため、ズーム関数の呼び出しでその値を静的に渡す必要はありません。

最後に、jQueryを使用してこの種のDOM操作を行うことを強くお勧めします。これは、コードがはるかに簡単で読みやすく、スクリプトがほとんどそのままの状態でブラウザー間で機能するためです。

この特定の問題の解決策はありませんが、jQueryを使用すると、クリックしたセルのコンテンツを含む新しいDOM要素（たとえばdiv）を挿入し、テーブル上に浮かび、ズーム効果をシミュレートするのは非常に簡単です。そのdivは絶対に配置可能であり、ユーザーがクリックしたセルよりもはるかに優れたスタイルにすることができます。

于 2009-12-10T11:09:56.127 に答える
1

これがテーブルの仕組みです。div を使用して同じことを試してみると、position:absolute を使用して問題に対処できるので、展開された div が他の div をオーバーレイします。これは、表のセルでも同じように機能します。

于 2009-12-10T10:20:11.433 に答える