正確顯示和隱藏使用javascript的內容

Question

有一個表格，其中包含有關在網站上創建的頁面的信息。該表格顯示了所有的首頁。所有包含子頁面的首頁都會在頁面名稱旁邊有一個複選框，可以勾選這些複選框來查看或展示所有子頁面，如果未點擊，所有子頁面都將隱藏起來。

它的工作，但有限制，也不完全是我希望的方式。

第一個挑戰是：

當打鉤時控制複選框的javascript有一個限制。該函數預計會獲得包含每個首頁的子頁面的標籤的唯一ID，並且這應該僅由一個函數處理。相反，我只能通過創建10個函數來處理10個唯一ID，從而限制性能。即如果特定首頁的唯一ID不在所創建的JavaScript函數中，則無法工作。 （如在示例中所示）

第二挑戰是：

我寧願使用一個超鏈接，而不是用來指示一頂頁具有子頁面輸入複選框。

我試着用超鏈接工作，但它不會工作，所以我不得不選擇複選框。

這裏是（IDS正在通過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。

會很高興得到這個幫助。

Answer 1

你可以在你的onclick傳遞參數，然後你只需要一次功能：

FIDDLE

<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"; 
    } 
}