Show/Hide table row from mysql db

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
linuh2009
Forum Newbie
Posts: 3
Joined: Wed Mar 25, 2009 6:43 am

Show/Hide table row from mysql db

Post by linuh2009 »

Hi there.I really need help on this and don`t know anybody that could do it:D.What is all about: i have a mysql database and php to display the content.What i need is that when i click on a row (doesn`t matter what cell) to give me an extra row(show/hide) witch will display the content from a column inside mysql and it is not displayed normally.Using HTML and js i could do it, but since i`m new to php & MySQL i just don`t know how to do this.In html i did that :

Code: Select all

 
<html>
<head>
<style type="text/css">
.hide
{
   display: none ;
}
 
.show
{
    display: block;
    background-color: #d0d0d0;
}
</style>
<script type="text/javascript">
function showHide(id)
{
   if (document.getElementById)
   var obj = document.getElementById(id);
    if (typeof(obj)=='undefined' || obj==null) return;
   if (obj.className == 'hide') obj.className='show';
      else obj.className='hide';
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
    <tr onclick="showHide('rnd1');">
<td>ROW1</td>
<td>ROW1</td>
<td>ROW1</td>
<td>ROW1</td>
    </tr>
    <tr id="rnd1" class="hide">
<td colspan="4">Describe row 1</td>
    </tr>
    <tr onclick="showHide('rnd2');">
<td>ROW2</td>
<td>ROW2</td>
<td>ROW2</td>
<td>ROW2</td>
    </tr>
    <tr id="rnd2" class="hide">
<td colspan="4">Describe row 2</td>
    </tr>
</table>
</body>
</html> 
 
 
 
In PHP i use that to display it :

Code: Select all

 
<?
echo "</tr>\n";
// print table rows
while($row = mysql_fetch_row($result))
{
    echo "<tr class='entry show'>";
 
   
    foreach($row as $cell)
        echo "<td>$cell</td>";
 
    echo "</tr>\n";
}
mysql_free_result($result);
?>
 
 
Thank you for your time and i hope i made myself understood . I`m trying to do that for 3 days now .
waylon999
Forum Commoner
Posts: 26
Joined: Mon Mar 23, 2009 5:29 pm

Re: Show/Hide table row from mysql db

Post by waylon999 »

I'm not sure I'm fully understanding you, but if you are asking if there is a way that a user can click on a row in a table and have it hide/reappear using php then no. Being a server-side language, php will not be responding to users clicks in a browser (without re-loading a page or being called from javascript etc.). You would need to use javascript to do that.
linuh2009
Forum Newbie
Posts: 3
Joined: Wed Mar 25, 2009 6:43 am

Re: Show/Hide table row from mysql db

Post by linuh2009 »

Ok i know php wont do that by him self and it will be posible only using js...what i don`t know is how to implement that js with php...to get id for that row only and display that row that coreponds to that id..... when click for show/hide.....
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Show/Hide table row from mysql db

Post by php_east »

you will need ajax for that. since you already know html, js and php, ajax combines all three. you basically have a javascript detect user click, send an ajax to server, receive the returned values, and insert those values into a div or table whatever, which you have ready and hidden.

then...unhide. :drunk:
waylon999
Forum Commoner
Posts: 26
Joined: Mon Mar 23, 2009 5:29 pm

Re: Show/Hide table row from mysql db

Post by waylon999 »

I'm not a javascript expert, but I think that you would be able to give each table row an id (tr1, tr2, etc.), then when a user clicks on a row you can detect what element the click was on and set the display to 'none' or ' ' accordingly.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Show/Hide table row from mysql db

Post by php_east »

that won't work. he said
linuh2009 wrote:witch will display the content from a column inside mysql
waylon999
Forum Commoner
Posts: 26
Joined: Mon Mar 23, 2009 5:29 pm

Re: Show/Hide table row from mysql db

Post by waylon999 »

Yeah, I guess I'm still confused on exactly what is trying to be accomplished, but it seems to me that you could build the entire table, hiding the rows you don't want to be displayed, then just hide/show them based on clicks and avoid making extra calls to the server.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Show/Hide table row from mysql db

Post by php_east »

waylon999 wrote:Yeah, I guess I'm still confused on exactly what is trying to be accomplished,
yes, so am i
waylon999 wrote:but it seems to me that you could build the entire table, hiding the rows you don't want to be displayed, then just hide/show them based on clicks and avoid making extra calls to the server.
of course, that would be better, but he didnt say what options would given to the user, so i am assuming he meant he wanted to display something from the server, as he said he could already hide/unide in html/js.

but you are right, getting something ealier on and hide it would be better. but now i think he meant that his problem is he does not know how to get values form mysql. so it would be a mysql question then. so i figured, to be safe, i'd just wrap my answer up in a safe 'u need ajax' way :)
linuh2009
Forum Newbie
Posts: 3
Joined: Wed Mar 25, 2009 6:43 am

Re: Show/Hide table row from mysql db

Post by linuh2009 »

Ok.I`ve managed doing somthing close...using smarty.After your discussions here i`ve got an idea about what should i do. Until now i`ve got this :
<html>
<head>
<title>Example Templating</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="default" />
<script type="text/javascript">
function show_details(item_id, item_content) {ldelim}
var item_id = 'item_' + item_id;

document.getElementById(item_id).innerHTML = item_content;

}

function hide_details(item_id) {ldelim}
var item_id = 'item_' + item_id;

document.getElementById(item_id).innerHTML = '&nbsp;';
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>Denumire</td>
<td>Numar inventar</td>
<td>UM</td>
<td>Cantitatea</td>
<td>Anul Achizitiei</td>
<td>Valoarea initiala</td>
<td>Valoarea actuala</td>
<td>Localizare</td>
<td></td>
</tr>
</thead>
<tbody>
{foreach from=$items item=i}
<tr>
<td onmouseover="show_details({$i.ident},'{$i.detalii}')" onmouseout="hide_details({$i.ident})">{$i.denumire}</td>
<td class='center'>{$i.nrinv}</td>
<td class='center'>{$i.um}</td>
<td class='center'>{$i.cantitatea}</td>
<td class='center'>{$i.achizitie}</td>
<td class='right'>{$i.initial}</td>
<td class='right'>{$i.actual}</td>
<td>{$i.locatia}</td>
<td id="item_{$i.ident}">&nbsp;</td>
</tr>
{/foreach}
</tbody>
<table>
</body>
</html>
It will display the hidden content on mouseover but not where i need it :D.So i`ll keep working on it.
Thank you very much for your help.I`ll try now using ajax.A nice day to all of you.
An example of exactly what i need could be found here : http://daagest.feaa.uaic.ro/teste/example1/index.html
Post Reply