最受欢迎

循环时隐藏/显示表中的内容

hide /show content in table while loop

本文关键字：显示 隐藏 循环 | 更新日期: 2023-09-27

这是下面给出的代码输出的图像下面的代码显示了一个包含隐藏/显示内容的表。

我想在表格的"用户名"标题下显示用户名，点击"+"按钮时出现的内容应该出现在各自的标题下，比如project_name应该出现在project name下，project_id应该出现在ProjectID下，等等…

如果有人能帮忙。。。

    <?php
$hostname_ckumbh = "localhost";
$database_ckumbh = "pmb_demo";
$username_ckumbh = "root";
$password_ckumbh = "";
$ckumbh = mysql_pconnect($hostname_ckumbh , $username_ckumbh , $password_ckumbh) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_ckumbh , $ckumbh); 

?>
<html>
<head>
<style>
.button1 {
    width: 100%
}.wid25{width:25% !important;float:left}
.sign_cls {
    cursor: pointer;
    width: 10%;
    background: #09F;
    font-weight: bold;
    color: #FFF
}
.sign_cls2 {
    cursor: pointer;
    width: 10%;
    background: #900;
    font-weight: bold;
    color: #FFF
}
.sign_cls,.sign_cls2 {float: left;  width: 1% !important;}
.date_cls {
    width: 90%;
}
.wid_25 {
    width: 25%;
    float: left;
    margin: 10px 0
}
.line_style td {
    width: 25%
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function toggle(cls,cls2){
    if($("."+cls).is(":visible")){
        $("."+cls).hide("slow");    
        $("#"+cls2).removeClass('sign_cls2').addClass('sign_cls');      
    }else{
        $("."+cls).show("slow");
        $("#"+cls2).removeClass('sign_cls').addClass('sign_cls2');
    }
}
</script>
</head>
<body>
<table border="0%" align="center" width="100%" height="100%" >
        <tr class="line_style" align="center">
            </br>
          <td>User Name</td>
          <td>Project Name</td>
          <td>Project ID</td>
          <td>Task Details</td>
          <td>Status</td>
        </tr>
        <?php

    $record =mysql_query("SELECT `u_vemail` FROM `proj_user`");
    $i = 0;
    while($row=mysql_fetch_array($record))
    {
    $record2 =mysql_query("SELECT `project_name` , `project_id` , `task_details` , `date` , `status` FROM  `add_tasks` WHERE   `user_name`='$row[u_vemail]'");

    ?>
        <tr align="center">      
        <td colspan="4">                
            <div class="button1" onClick="toggle('hide<?php echo $i;?>','test<?php echo $i;?>')" style="float:left">
         <span id="test<?php echo $i;?>" class="sign_cls">+</span><span class="date_cls"><?php echo $row["u_vemail"] ?></span>

         </div>  
         <div class="hide<?php echo $i;?>" style="display:none;width:100%;float:left;">            
        <?php
            while($row2 =mysql_fetch_array($record2))
        {   

        ?>                                
                    <div style="width:100%">

                        <div class="wid_25"><?php echo $row2["project_name"]; ?></div>
                        <div class="wid_25"><?php echo $row2["project_id"]; ?></div>
                        <div class="wid_25"><?php echo $row2["task_details"]; ?></div>
                        <div class="wid_25"><?php echo $row2["status"]; ?></div>                
                    </div>
        <?php 
        }
        ?></div>                    
        </td>                   
        </tr><?php
        $i++;
    }
        ?>        <table>
        </table>
          </td>
          </tr>
      </table>
      <br/>
      <br/>
</body>
</html>

只是一个初始问题：你能看到屏幕上显示的所有内容吗？听起来你已经完成了所有的工作，并且正在寻找一种实现这个显示/隐藏功能的方法。此外，看起来您已经在切换函数中尝试过了，尽管我不完全确定变量cls和cls2来自哪里。。。

我尝试了一些类似的方法，用Javascript和CSS让某些组件淡出屏幕，什么对我最有效，什么给表的各行添加样式，然后用Javascript应用新样式（即隐藏样式，用JS将其更改为可见）

我的意思是。。。

#tableRow1 {opacity: 0;
    transition: opacity 4s;
    -webkit-transition: 4s;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;}
#tableRow2 {opacity: 0;
    transition: opacity 4s;
    -webkit-transition: 4s;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;}
#tableRow3 {opacity: 0;
    transition: opacity 4s;
    -webkit-transition: 4s;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;}

<tr id='tableRow2' width="0%">
<tr id='tableRow2' width="0%">
<tr id='tableRow2' width="0%">

以及JS:

function loadPage(){
    document.getElementById("tableRow1").style.opacity = 1;
    document.getElementById("tableRow2").style.opacity = 1;
    document.getElementById("tableRow3").style.opacity = 1;
}

我使用了不透明度，但隐藏的概念是一样的。你可以用你的按钮调用JS函数，如果你要创建多个按钮，你可以用一个循环给每个按钮一个唯一的id，并在函数中放一个循环，这样它就可以看到相应的行。只要div标记有一个唯一的id，这也应该适用于它们。希望这能有所帮助。。。

要在用户名下方显示用户名，在项目名称下方显示项目名称，您可以尝试以下代码：

   <tr class="line_style" align="center">
      <th>User Name</th>
      <th>Project Name</th>
      <th>Project ID</th>
      <th>Task Details</th>
      <th>Status</th>
    </tr>
    <tr align="center">      
      <td colspan="4">                
        <div class="button1" onClick="toggle('hide<?php echo $i;?>','test<?php echo $i;?>')" style="float:left">
     <span id="test<?php echo $i;?>" class="sign_cls">+</span><span class="date_cls"><?php echo $row["u_vemail"] ?></span>
         </div>  
         <div class="hide<?php echo $i;?>" style="display:none;width:100%;float:left;">            
        <?php
           while($row2 =mysql_fetch_array($record2))
         {   
         ?>                                
           <div style="width:100%">

            <div class="wid_25"><?php echo $row2["project_name"]; ?></div>
            <div class="wid_25"><?php echo $row2["project_id"]; ?></div>
            <div class="wid_25"><?php echo $row2["task_details"]; ?></div>
            <div class="wid_25"><?php echo $row2["status"]; ?></div>                
            </div>
       <?php 
        }
        ?>
            </div>                    
       </td>                   
    </tr>

    The problem is you used (<td></td>) instead of (<th></th>) tag.

希望它能帮助你。。。。。。。。

<?php
$hostname_ckumbh = "localhost";
$database_ckumbh = "pmb_demo";
$username_ckumbh = "root";
$password_ckumbh = "";
$ckumbh = mysql_pconnect($hostname_ckumbh, $username_ckumbh, $password_ckumbh) or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($database_ckumbh, $ckumbh);
?>
<html>
    <head>
        <style>
            .button1 {
                width: 100%
            }.wid25{width:25% !important;float:left}
            .sign_cls {
                cursor: pointer;
                width: 10%;
                background: #09F;
                font-weight: bold;
                color: #FFF
            }
            .sign_cls2 {
                cursor: pointer;
                width: 10%;
                background: #900;
                font-weight: bold;
                color: #FFF
            }
            .sign_cls,.sign_cls2 {float: left;  width: 1% !important;}
            .date_cls {
                width: 90%;
            }
            .wid_25 {
                width: 25%;
                float: left;
                margin: 10px 0
            }
            .line_style td {
                width: 25%
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <script type="text/javascript">
            function toggle(cls, cls2) {
                if ($("." + cls).is(":visible")) {
                    $("." + cls).hide("slow");
                    $("#" + cls2).removeClass('sign_cls2').addClass('sign_cls');
                } else {
                    $("." + cls).show("slow");
                    $("#" + cls2).removeClass('sign_cls').addClass('sign_cls2');
                }
            }
        </script>
    </head>
    <body>
        <table border="1"  align="center" width="100%" height="100%" >
            <tr>
                <td></td>
                <td>User Name</td>
                <td>Project Name</td>
                <td>Project ID</td>
                <td>Task Details</td>
                <td>Status</td>
            </tr>
            <?php
                $record =mysql_query("SELECT `u_vemail` FROM `proj_user`");
                //$record = array('0', '1');  // push your sql result to this array
                $i = 0;
                while ($row=mysql_fetch_array($record)) {
                    //$row2 = array("project_name", "project_id", "task_details", "status");  // push your sql result to this array
                    $record2 =mysql_query("SELECT `project_name` , `project_id` , `task_details` , `date` , `status` FROM  `add_tasks` WHERE   `user_name`='$row[u_vemail]'");
                    $row2 =mysql_fetch_array($record2);
            ?>
                <tr align="center">
                    <td><span onclick="hideRow('ex<?php echo $i?>','id<?php echo $i?>')" id="id<?php echo $i?>">+</span></td>
                    <td class="ex<?php echo $i?>"><?php echo $row["u_vemail"] ?></td>            
                    <td class="ex<?php echo $i?>"><?php echo $row2["project_name"]; ?></td>                              
                    <td class="ex<?php echo $i?>"><?php echo $row2["project_id"]; ?></td>
                    <td class="ex<?php echo $i?>"><?php echo $row2["task_details"]; ?></td>
                    <td class="ex<?php echo $i?>"><?php echo $row2["status"]; ?></td>
                </tr>
            <?php
                    $i++;
                }
            ?>
        </table>
        <script>
            function  hideRow(id1,id2){
                $("."+id1).toggle();
                if(document.getElementsByClassName(id1)[0].style.display == 'none'){
                    $("#"+id2).css("background-color","red");
                }else{
                    $("#"+id2).css("background-color","white");
                }
            }
        </script>
    </body>
</html>
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习