Collapsing rows using JS & PHP

Question

samsambm 0 Newbie Poster

13 Years Ago

Hello .
I'm not sure what is wrong in my code. I'm trying to expand table row to see more details from mysql query . The idea is to click 'show / hide ' link and on that onclick event the row below need to be expanded.Here is my code :

<?php

  while ($row = mysql_fetch_assoc($get))
    {
      $customer = $row['customer_id'];  

       //get data 
      $the_user = $row['username'];
      $the_team = $row['team'];
      $name = $row['customer_name'];
      $phone =$row['customer_phone'];
      $email = $row['customer_email'];
      $product = $row['customer_product'];
      $comment = $row['customer_comment'];
      $date = $row['date'];
      $show_date = date("H:i d/M/Y",$date);
      $i = $i +3; 

     if($i % 2 )
        {
             $bg_color = "#996600";
             $font = "#000000";
        }
        else 
        {
            $bg_color = "#666699";
            $font = "#ffffff";
        }

         echo '

           <tr bgcolor = '.$bg_color.' style="font-size:12px" align="middle">
             <td>
               <font color ='.$font.'>
               '.$name.'
               </font>
             </td>
             <td>
               <font color ='.$font.'>
               '.$phone.'
               </font>
             </td>
             <td>
               <font color ='.$font.'>
               '.$email.'
               </font>
             </td>
             <td>
               <font color ='.$font.'>
               '.$product.'
               </font>
             </td>
             <td align="left">
               <font color ='.$font.'>
               '.$comment.'
               </font>
             </td>
              <td>
               <font color ='.$font.'>
               '.$show_date.'
               </font>
             </td>
             <td>
               <font color ='.$font.'>
               '.$the_user.'
               </font>
             </td>
             <td>
               <font color ='.$font.'>
               '.$the_team.'
               </font>
             </td>

             <td>
               <font color ='.$font.'>
               </font>
            ';?>


 <script language="javascript" type="text/javascript">
 function showHide (a) 
 {
    var p = document.getElementById('p'+a);
    if (p.style.display=='block') 
      {
          p.style.display='none';
      }
      else 
      {
          p.style.display='block';
      }

 }
</script>      

             <a href="#" onclick="showHide(<?php $customer; ?>)"> Show / Hide </a>                  

 </td> 

     <tr id="p<?php $customer; ?>">
      <td>
       <?php echo $customer; ?>
       </td>
     </tr>


     </tr>   



    <?php    


  }


 ?>

Thanks....

javascript php

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

2 Contributors
6 Replies
767 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by samsambm

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Samsambm,

Can you post an example of the page as served, post PHP processing.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Samsambm,

Here's a demo showing how to show/hide either a single table row or a set of consecutive rows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<script>
function showHide(sID){
	var el = document.getElementById(sID);
	if(el) {
		el.style.display = (el.style.display === '') ? 'none' : '';
	}
}
</script>
</head>

<body>

<table border>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tr><td colspan="3">Section 1&nbsp;<button onclick="showHide('section_1')">Show/hide</button></tr>
<tr id="section_1">
<td>S_1 Cell_1_1</td>
<td>S_1 Cell_1_2</td>
<td>S_1 Cell_1_3</td>
</tr>
<tr><td colspan="3">Section 2&nbsp;<button onclick="showHide('section_2')">Show/hide</button></tr>
<tbody id="section_2">
<tr>
<td>S_2 Cell_1_1</td>
<td>S_2 Cell_1_2</td>
<td>S_2 Cell_1_3</td>
</tr>
<tr>
<td>S_2 Cell_2_1</td>
<td>S_2 Cell_2_2</td>
<td>S_2 Cell_2_3</td>
</tr>
</tbody>
</table>
</body>
</html>

Airshow

Edited 13 Years Ago by Airshow because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

samsambm 0 Newbie Poster · Answer 1 · 2011-01-20T14:03:06+00:00

Hi Airshow. My only question is regarding this scrpt :

}
</script>

</td>

I need to pass the curruent row number in order to expand it or to hide it . the table is showing users details and when I'm clicking Show / hide link I want to expand the row to view more of that current user details.

samsambm 0 Newbie Poster · Answer 2 · 2011-01-20T17:55:53+00:00

Thank you very much for the replay. My main issue is not to show or to hide by regullar ID. It's to show or hide a row that has a variable id : <tr id="p<?php $customer; ?>">

Thanks.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2011-01-20T18:50:47+00:00

That's just a question of building the HTML with php.

Take the two rows:

<tr><td colspan="3">Section 1&nbsp;<button onclick="showHide('section_1')">Show/hide</button></tr>
<tr id="section_1">

The php source would be something like:

<tr><td colspan="3">Section <?php echo $loopcounter; ?>&nbsp;<button onclick="showHide('section_<?php echo $loopcounter; ?>')">Show/hide</button></tr>
<tr id="section_<?php echo $loopcounter ?>">

Where $loopcounter is a php variable counting 0, 1, 2 as the table rows are built.

Your HTML is slightly different but the principle is the same.

Airshow

samsambm 0 Newbie Poster · Answer 4 · 2011-01-23T21:16:01+00:00

Hi Airshow ,

Issue solved thanks to your solution.

Thanks a lot !