0

ユーザーがオンとオフを切り替えられるようにする（左側の）メニューサイドバーがあります。ドロップダウンして折りたたむコードを用意し、折りたたんだときに空白を残します。ただし、隣接するペインのコンテンツを展開して、メニューがあった場所を埋める方が見栄えがよい場合があります。現在、メニューはテーブルの単一セルにあり、コンテンツは同じ行の単一セルから右にあります。上下の行と競合するため、行のセル数を変更しないようにしたいと思います。したがって、1つのアプローチは、メニューを含む2つのセルと、コンテンツが2つのcolspanを持つ1つのセルを切り替えることです。私の理解では、Javascriptドロップダウンは、両方のバージョンをプリロードしてから一方を非表示にすることで機能します。Javascriptでテーブル構造を変更することは可能でしょうか？以下のように見えると想像してみてください。しかし、これ自体は機能しません。

<script type="text/javascript">
        function toggleBar(obj) {
            var navbar = document.getElementById("navbar");
            if (navbar.style.display == "none") {
                navbar.style.display = "";
                obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
            } else {
                navbar.style.display = "none";
                obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'><td colspan=2";
            }
        }

と体の中で：

<table><tr><div style="background-color:silver;width:100px">
<a href="javascript:void(0)" onclick="toggleBar(this);"><td><img src="images/collapse.gif" alt="Hide Menu"><div id="navbar" ><a href="javascript:void(0)" onclick="toggleBar(this);"></a></a>menu here<br>menu1<br>menu2</td><td></div></div>CONTENT GOES HERE<td></tr>
<table>
4

1 に答える 1

0

これはトリッキーです.. 「レイアウトにテーブルを使用しないでください!」と言うのは少し遅いと思います. 、しかしそれは本質的にあなたの問題です。

テーブルがその下の何かに接続されていて、colspan を使用する必要がある場合、これを行う簡単な方法がわかりません..

n-1 列と colspan を使用して新しい行を追加し、すべての HTML を新しいセルにコピーして、古い行を削除できると思います。しかし、それは元のセルで発生する可能性のある JavaScript を壊してしまいます。

于 2012-04-21T18:25:15.293 に答える