отображение и скрытие содержимого с помощью javascript правильно

Question

Есть таблица с информацией о страницах, созданных на сайте. В этой таблице показаны все верхние страницы. Все верхние страницы с дополнительными страницами будут иметь флажок рядом с именем страницы, которое можно отметить, чтобы просмотреть или открыть все вспомогательные страницы, и если они не были отклеены, все вспомогательные страницы будут скрыты.

Он работает, но имеет ограничение, а также не совсем так, как я хочу.

первая задача состоит в том:

Javascript управления флажок, когда галочка имеет предел. Ожидается, что функция получит уникальный идентификатор тега, содержащий вспомогательные страницы для каждой верхней страницы, и это должно обрабатываться только одной функцией. Скорее всего, я мог бы сделать это, создав 10 функций для обработки 10 уникальных идентификаторов, что тем самым ограничивает производительность. Если уникальный идентификатор определенной верхней страницы не находится в созданных функциях javascript, он не будет работать. (Как показано в примере)

второй вызов является:

Я предпочел бы использовать гиперссылку вместо ввода флажок используется для указания того, что первая страница имеет подстраниц.

Я пробовал работать с гиперссылкой, но это просто не сработало, поэтому мне нужно было просто установить флажок.

Вот код (идентификаторы называют динамически с помощью 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"; 
    } 
}