Скрыть несколько дочерних строк в таблице - PullRequest
Новая
       11

Скрыть несколько дочерних строк в таблице

0 голосов
/ 27 ноября 2018

Я создал таблицу в PHP, которая отображает родительские строки и дочерние строки.Каждая строка имеет идентификатор в соответствии со счетчиком в цикле.Мне нужно показать / скрыть дочерние строки, нажав на родительскую строку.Мне нужно адаптировать этот код, который я нашел, но он работает для меня.Не могли бы вы помочь? 

<html>
<head>
<script>
function toggle(thisname) {
 tr=document.getElementsByTagName('tr')
 for (i=0;i<tr.length;i++){
  if (tr[i].getAttribute(thisname)){
   if ( tr[i].style.display=='none' ){
    tr[i].style.display = '';
   }
   else {
    tr[i].style.display = 'none';
    }
   }
  }
 }
</script>
</head>
<body>

<table border="1">
<tr>
<td><span onClick="toggle('name');">Parent row</span></td>
</tr>
<tr name="fred1">
<td>child row1</td>
</tr>
<tr name="fred2">
<td>child row2</td>
</tr>
</table>
</script>
</body>
</html>

Результатом этого кода является то, что все дочерние строки скрыты / отображаются, а не только те, которые соответствуют имени fred2.

Мой код php такой: 

while(....
if ($ElementType=='child')
{
    echo "<tr name='hide$ID'>";
}
else
{
    echo '<tr bgcolor="'.$color.'" style="height:25px">';
}   
if ($ElementType=='parent')
{
    $name='hide'.$ID;
    ?>
    <td class="calc-l"><span class="Style4"><span onClick="showhide('$name');"> 
    <?php
    echo $name.'</span></span></td>';

Надеюсь, я был достаточно ясен.заранее большое спасибо.

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

хорошо, я адаптировал код для своих нужд следующим образом: 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$('.hideshow').click(function(e){

    var child = $(this).data('child');  

    $('#'+child).toggle();

})
})
</script>

</head>


<table width="500" border=1>
<tr>
    <td width="250"><a href="javascript:void(0)" class="hideshow" data-child="child-1">Row First</a>

            <table border=1 style="display:none" id="child-1">
                <tr>
                    <td width="250">Row 1.1</td><td>Text 1.1</td>
                </tr>
                <tr>
                    <td width="250">Row 1.2</td><td>Text 1.2</td>
                </tr>
                <tr>
                    <td width="250">Row 1.3</td><td>Text 1.3</td>
                </tr>
                <tr>
                    <td width="250">Row 1.4</td><td>Text 1.4</td>
                </tr>
            </table>
    <td>Name 1</td>
</tr>

   <tr>
    <td width="250"><a href="javascript:void(0)" class="hideshow" data-child="child-2">Row Second</a>

            <table border=1 style="display:none" id="child-2">
                <tr>
                    <td width="250">Row 2.1</td><td>Text 2.1</td>
                    <td>Name 2</td>
                </tr>
                <tr>
                    <td width="250">Row 2.2</td><td>Text 2.2</td>
                    <td>Name 2</td>
                </tr>
                <tr>
                    <td width="250">Row 2.3</td><td>Text 2.3</td>
                    <td>Name 2</td>
                </tr>
                <tr>
                    <td width="250">Row 2.4</td><td>Text 2.4</td>
                    <td>Name 2</td>
                </tr>
            </table>
    <td>Name 2</td>
    </td>
</tr>

Проблема в том, что дочерняя таблица находится в первой ячейке.

0 голосов
/ 27 ноября 2018

Проверьте следующий пример сценария с действием «показать / скрыть строку родитель-потомок» с помощью jquery, может ли оно помочь вам: * 

<table>
    <tr>
        <td>
            <a href="javascript:void(0)" class="hideshow" data-child="child-1">Row First</a>
                <table style="display:none" id="child-1">
                    <tr>
                        <td>Row 1.1</td>
                    </tr>
                    <tr>
                        <td>Row 1.2</td>
                    </tr>
                    <tr>
                        <td>Row 1.3</td>
                    </tr>
                    <tr>
                        <td>Row 1.4</td>
                    </tr>
                </table>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" class="hideshow" data-child="child-2">Row Second</a>
                <table style="display:none" id="child-2">
                    <tr>
                        <td>Row 2.1</td>
                    </tr>
                    <tr>
                        <td>Row 2.2</td>
                    </tr>
                    <tr>
                        <td>Row 2.3</td>
                    </tr>
                    <tr>
                        <td>Row 2.4</td>
                    </tr>
                </table>
        </td>
    </tr>

</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.hideshow').click(function(e){

        var child = $(this).data('child');  

        $('#'+child).toggle();

    })
})
</script>
...