Hiding a description in a dynamic table

Question

I have a table that is created using PHP and when you click on the name of the item I want the description to show.

<table border="1" bordercolor="#000000">
    <tr class="trintial">
    <th width="50px"><input type="checkbox" readonly="readonly" checked="checked" /></th>
    <th width="300px">To-Do Item</th>
    <th width="100px">Priority</th>
    <th width="100px">Due Date</th>
    </tr>

    <?php
    $i=0;
    while ($i < $num) 
    {
         $entrynum=mysql_result($result,$i,'todo.entry');
             $f2=mysql_result($result,$i,'todo.item');
         $f3=mysql_result($result,$i,'todo.priority');
         $f4=mysql_result($result,$i,'todo.duedate');
         $f5=mysql_result($result,$i,'todo.description');
     ?>

     <tr id="<?php echo "row$entrynum"; ?>" class="trintial">
        <td><input type="checkbox" onchange="change(this,<?php echo "row$entrynum"; ?>)" name="<?php echo "box$entrynum"; ?>" value="checked" /></td>
        <td><?php echo $f2; ?></td>
        <td><?php echo $f3; ?></td>
        <td><?php echo $f4; ?></td>
     </tr>
     <?php
    $i++;
    }
    mysql_close($con);
      ?>
</table>

Answer 1

i need it to ouput when the text of $f2 is clicked

I like this view of the world. You really can't do that. Because what you don't echo with PHP, the user never receives in his browser. (Remember: PHP is executed server-side only, HTML, CSS, JavaScript are "executed" in the users browser.)

To make your description appear when $f2 is clicked, you'll need to pack it into your html and then hide it with CSS. After that you'll need to write some smart JavaScript which overwrites the CSS of your description, when $f2 is clicked. That's not trivial, but it's doable. If you need some help with it, post exactly what you understand under "show"ing the description, because there are lots of ways to do this.

Answer 2

Supertech, I get the impression that you are confusing server-side code (PHP in this case) with client-side code. PHP doesn't run in the user's browser. Once the page data has been sent, PHP is no longer running. What you want to do is create some Javascript to modify the style (CSS) of the elements on the page.

Start by outputting your table as it would look with everything expanded. Once this is done, add a CSS class to all of the elements, such as "hidden". Then in your CSS for the page, define this class with something like this

.hidden {
    display:none;
}

Now, you need to add the appropriate Javascript to links to display. Something like this should do

<a href="javascript:yourelement.style.display='block'">Click Me</a>

If all is well, yourelement will now be displayed.

You can read up on the CSS display property here: http://www.w3schools.com/css/pr_class_display.asp

And, the Javascript necessary to change the style here: http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

I hope this helps you understand how all of these essentially unrelated pieces fit together in your web application.