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

Samsambm,

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

Airshow

Hi Airshow. My only question is regarding this scrpt :

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

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,

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

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.

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

Hi Airshow ,

Issue solved thanks to your solution.

Thanks a lot !

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.