Fatal编程技术网
  • javascript/
  • Javascript 循环时隐藏/显示表中的内容

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

javascript php

Javascript 循环时隐藏/显示表中的内容,javascript,php,Javascript,Php,下面的代码显示一个包含隐藏/显示内容的表 我想在表格的“用户名”标题下显示用户名，单击“+”按钮时显示的内容应显示在各自标题下，如项目名称应显示在项目名称下，项目id应显示在项目id下等等 如果有人能帮忙 <?php $hostname_ckumbh = "localhost"; $database_ckumbh = "pmb_demo"; $username_ckumbh = "root"; $password_ckumbh = ""; $ckumbh = mysql_pcon

下面的代码显示一个包含隐藏/显示内容的表

我想在表格的“用户名”标题下显示用户名，单击“+”按钮时显示的内容应显示在各自标题下，如项目名称应显示在项目名称下，项目id应显示在项目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>


.按钮1{
宽度：100%
}.wid25{宽度：25%！重要；浮点：左}
.签名{
光标：指针；
宽度：10%；
背景：#09F；
字体大小：粗体；
颜色：#FFF
}
.签名(cls2){
光标：指针；
宽度：10%；
背景：#900；
字体大小：粗体；
颜色：#FFF
}
.sign_cls、.sign_cls2{float:左；宽度：1%！重要；}
.date_cls{
宽度：90%；
}
韦杜先生25{
宽度：25%；
浮动：左；
利润率：10px 0
}
.line_风格td{
宽度：25%
}
功能切换（cls、cls2）{
如果（$（“+cls”）.is（“：可见”））{
$（“+cls）.隐藏（“慢”）；
$（“#”+cls2）.removeClass（'sign#cls2'）.addClass（'sign#cls'）；
}否则{
$（“+cls）.show（“slow”）；
$（“#”+cls2）.removeClass（'sign#cls'）.addClass（'sign#cls2'）；
}
}


用户名
项目名称
项目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.




用户名
项目名称
项目ID
任务详细信息
地位

只是一个初步的问题：你能看到屏幕上显示的所有东西吗？听起来您已经完成了所有工作，正在寻找实现此显示/隐藏功能的方法。另外，看起来您已经尝试过使用切换函数来执行此操作，尽管我不完全确定变量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函数，如果要创建多个按钮，可以为每个按钮提供一个唯一的id和一个循环，并在函数中放置一个循环，使相应的行可见。只要div标记具有唯一的id，这也应该适用于div标记。希望这有助于…
希望它能帮助您


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




.按钮1{
宽度：100%
}.wid25{宽度：25%！重要；浮点：左}
.签名{
光标：指针；
宽度：10%；
背景：#09F；
字体大小：粗体；
颜色：#FFF
}
.签名(cls2){
光标：指针；
宽度：10%；
背景：#900；
字体大小：粗体；
颜色：#FFF
}
.sign_cls、.sign_cls2{float:左；宽度：1%！重要；}
.date_cls{
宽度：90%；
}
韦杜先生25{
宽度：25%；
浮动：左；
利润率：10px 0
}
.line_风格td{
宽度：25%
}
功能切换（cls、cls2）{
如果（$（“+cls”）.is（“：可见”））{
$（“+cls）.隐藏（“慢”）；
$（“#”+cls2）.removeClass（'sign#cls2'）.addClass（'sign#cls'）；
}否则{
$（“+cls）.show（“slow”）；
$（“#”+cls2）.removeClass（'sign#cls'）.addClass（'sign#cls2'）；
}
}
用户名
项目名称
项目ID
任务详细信息
地位

这没什么区别…bt谢谢你的建议..我想要的正是最初所有的电子邮件id应该出现在表中的“用户名”列下..当点击“+”时，它应该在“项目名称”、“项目id”下面显示内容诸如此类的帮助evryone.但我添加了一个空div并应用了一些css，还将td colspan更改为5，因为我需要表中的5列。u是否可以在数组中提供虚拟值，以便我可以尝试、运行查询并提供一些虚拟数据。

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