0

有一个表格，其中包含有关在网站上创建的页面的信息。此表显示所有首页。所有带有子页面的首页都会在页面名称旁边有一个复选框，可以勾选它来查看或显示所有子页面，如果不勾选，所有子页面都将被隐藏。

它有效，但有局限性，也不完全是我希望的方式。

第一个挑战是：

勾选时控制复选框的 javascript 有一个限制。该函数应获取包含每个首页的子页面的标签的唯一 ID，这应该由一个函数处理。相反，我只能通过创建 10 个函数来处理 10 个唯一 ID 来完成它，从而限制了性能。即，如果特定首页的唯一 ID 不在创建的 javascript 函数中，它将无法工作。（如示例所示）

第二个挑战是：

我更喜欢使用超链接而不是用于指示首页具有子页面的输入复选框。

我尝试使用超链接，但它不起作用，所以我只好选择复选框。

这是代码（通过 php 动态调用 ID）：

<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 中传递一个参数，然后只需要该函数一次：

小提琴

<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 回答