Question

我已经在PHP中创建了一个表，其中显示了父行和子行。根据循环中的计数器，每行都有一个ID。我需要通过单击父行来显示/隐藏子行。我需要修改我发现的这段代码，但它确实对我有用。你能帮忙吗？

<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>';

我希望我足够清楚。预先感谢。

Answer 1

使用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>

Answer 2

好，我已根据需要调整了代码，

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

问题在于子表位于第一个单元格中。

隐藏表中的多个子行

2 个答案: