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

时间：2015-12-09 12:14:58

标签： javascript php

here is the image of the output of the code given below 下面的代码显示了一个包含隐藏/显示内容的表格。

我想在表格的“用户名”标题下方显示用户名，单击“+”按钮时显示的内容应显示在各自标题下方，例如project_name应显示在PROJECT NAME下，project_id应显示在PROJECT ID下等等...

如果有人可以提供帮助...... 

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

3 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

只是一个初步问题：你能看到屏幕上显示的所有内容吗？听起来你已经完成了所有工作，并且正在寻找一种方法来实现这个显示/隐藏功能。此外，您似乎已经尝试使用切换功能，但我不完全确定您的变量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即可。希望这有助于......

答案 2 :(得分：0)

希望它会帮助你........ 

<?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>
相关问题
最新问题