有一张表格,其中包含有关在网站上创建的网页的信息。此表显示所有首页。所有带有子页面的首页都会在页面名称旁边有一个复选框,可以勾选以查看或显示所有子页面,如果未选中,则所有子页面都将被隐藏。
它有效,但有限制,也不是我希望的方式。
第一个挑战是:
勾选时控制复选框的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上的demo之间的差异只是上面代码中使用的php。
很高兴能得到这方面的帮助。
答案 0 :(得分: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";
}
}