Page 1 of 1

Show/Hide table row from mysql db

Posted: Wed Mar 25, 2009 6:59 am
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 .

Re: Show/Hide table row from mysql db

Posted: Thu Mar 26, 2009 2:57 pm
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.

Re: Show/Hide table row from mysql db

Posted: Fri Mar 27, 2009 1:45 am
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.....

Re: Show/Hide table row from mysql db

Posted: Fri Mar 27, 2009 6:58 am
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:

Re: Show/Hide table row from mysql db

Posted: Fri Mar 27, 2009 11:47 am
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.

Re: Show/Hide table row from mysql db

Posted: Fri Mar 27, 2009 12:00 pm
by php_east
that won't work. he said
linuh2009 wrote:witch will display the content from a column inside mysql

Re: Show/Hide table row from mysql db

Posted: Fri Mar 27, 2009 12:11 pm
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.

Re: Show/Hide table row from mysql db

Posted: Fri Mar 27, 2009 12:13 pm
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 :)

Re: Show/Hide table row from mysql db

Posted: Mon Mar 30, 2009 12:52 am
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