0

サイトで作成されたページに関する情報を含むテーブルを用意します。この表は、すべてのトップページを示しています。サブページを持つすべてのトップページには、ページ名の横にチェックボックスがあり、すべてのサブページを表示または公開するためにチェックボックスをオンにできます。チェックを外すと、すべてのサブページが非表示になります.

それは機能していますが、制限があり、正確に私が望む方法でもありません。

最初の課題は次のとおりです。

チェックボックスをオンにしたときにチェックボックスを制御する JavaScript には制限があります。この関数は、各トップ ページのサブ ページを含むタグの一意の ID を取得することが期待されており、これは 1 つの関数だけで処理する必要があります。むしろ、10 個の関数を作成して 10 個の一意の ID を処理し、それによってパフォーマンスを制限することによってのみ、それを行うことができました。つまり、作成したJavaScript関数に特定のトップページのユニークIDが含まれていないと動作しません。(例に示すように)

2 番目の課題は次のとおりです。

トップページにサブページがあることを示すために使用される入力チェックボックスの代わりに、ハイパーリンクを使用したいと思います。

ハイパーリンクを操作しようとしましたが、うまくいかないので、チェックボックスで解決する必要がありました。

コードは次のとおりです（IDはphpを介して動的に呼び出されます）：

<div style="width:400px; margin:0px auto;">
<table class="table table-bordered">
    <thead>
        <tr>
            <th width="40%">Page Title</th>
            <th>Page Content</th>
        </tr>
    </thead>
    <tbody>
     <?php

 $sn = 4;
 $sn2 = 11;
 $sn3 = 16;

 ?>

 <tr><td><input type="checkbox" id="boxChecked<?php echo $sn; ?>" onclick="boxChecked<?php echo $sn; ?>(this.checked);" /> Page A</td><td>Content</td></tr>

 <tbody id="rowChk<?php echo $sn; ?>" style="display:none;" class="subpages_bg">

 <tr><td>Page A1</td><td>Content</td></tr>
 <tr><td>Page A2</td><td>Content</td></tr>
 <tr><td>Page A3</td><td>Content</td></tr>
 <tr><td>Page A4</td><td>Content</td></tr>

    </tbody>

 <tr><td>Page B</td><td>Content</td></tr>
 <tr><td>Page C</td><td>Content</td></tr>

  <tr><td><input type="checkbox" id="boxChecked<?php echo $sn2; ?>" onclick="boxChecked<?php echo $sn2; ?>(this.checked);" /> Page D</td><td>Content</td></tr>

 <tbody id="rowChk<?php echo $sn2; ?>" style="display:none;" class="subpages_bg">

 <tr><td>Page D1</td><td>Content</td></tr>
 <tr><td>Page D2</td><td>Content</td></tr>
 <tr><td>Page D3</td><td>Content</td></tr>
 <tr><td>Page D4</td><td>Content</td></tr>

    </tbody>

 <tr><td>Page E</td><td>Content</td></tr>


  <tr><td><input type="checkbox" id="boxChecked<?php echo $sn3; ?>" onclick="boxChecked<?php echo $sn3; ?>(this.checked);" /> Page F</td><td>Content</td></tr>

 <tbody id="rowChk<?php echo $sn3; ?>" style="display:none;" class="subpages_bg">

 <tr><td>Page F1</td><td>Content</td></tr>
 <tr><td>Page F2</td><td>Content</td></tr>
 <tr><td>Page F3</td><td>Content</td></tr>
 <tr><td>Page F4</td><td>Content</td></tr>

    </tbody>

    </tbody>
</table>


</div>

これがjsfiddleデモです

注意: 上記のコードと jsfiddle のデモの違いは、上記のコードで使用されている php だけです。

これについて助けていただければ幸いです。

4

1 に答える 1

1

onclick でパラメーターを渡すことができ、関数は 1 回だけ必要です。

フィドル

<tr><td onclick="check('tab4');" > Page A</td><td>Content</td></tr>

 <tbody id="tab4" style="display:none;" class="subpages_bg">

 <tr><td>Page A1</td><td>Content</td></tr>
 <tr><td>Page A2</td><td>Content</td></tr>
 <tr><td>Page A3</td><td>Content</td></tr>
 <tr><td>Page A4</td><td>Content</td></tr>

    </tbody>

そして、必要な関数は 1 つだけです。

function check(id) {
    if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "";
    } else {
        document.getElementById(id).style.display = "none";
    }
}
于 2013-07-04T09:58:49.663 に答える