CodingForums.com - Help needed to show hide table rows

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Help needed to show hide table rows (http://www.codingforums.com/showthread.php?t=285019)

Help needed to show hide table rows

Hi

Fairly new to this and am having a problem combining javascript with php. I have a basic database table set up as in the picture below.

http://img246.imagevenue.com/loc356/..._122_356lo.JPG

I wanted to click the show and hide buttons in order to show/hide all the information below the top row for each record. I thought if I gave all the rows the same id the code I had would do this but it only hides the first of the rows (as in the picture below).

http://img194.imagevenue.com/loc448/..._122_448lo.JPG

the code I am using is

Code:

<html>

<script language="JavaScript"> 

function fncShow(ctrl)    

{       

document.getElementById(ctrl).style.display = '';    

}    

function fncHide(ctrl)    

{        

document.getElementById(ctrl).style.display = 'none';    

}

</script> 









<?php

$username="root";

$password="cherry";

$database="staffdatabase";



mysql_connect(localhost,$username,$password);

@mysql_select_db($database) or die( "Unable to select database");



$query="SELECT * FROM staffinformation WHERE Team= 'Juventus'";

$result=mysql_query($query);



$num=mysql_numrows($result);



mysql_close();

?>

<table border="1" cellspacing="1" cellpadding="1">

<tr>

<td><font face="Arial, Helvetica, sans-serif"></font></td>

<td><font face="Arial, Helvetica, sans-serif">Name</font></td>

<td><font face="Arial, Helvetica, sans-serif">Date Of Birth</font></td>

<td><font face="Arial, Helvetica, sans-serif">ID</font></td>

<td><font face="Arial, Helvetica, sans-serif">Login</font></td>

</tr>



<?php

$i=0;

while ($i < $num) {



$f1=mysql_result($result,$i,"Number");

$f2=mysql_result($result,$i,"UsableName");

$f3=mysql_result($result,$i,"staffID");

$f4=mysql_result($result,$i,"Position");

$f5=mysql_result($result,$i,"DateOfBirth");

?>



<tr>    

<td>[<a href="JavaScript:fncShow('tr<?php echo $i;?>');">Show</a>] [<a href="JavaScript:fncHide('tr<?php echo $i;?>');">Hide</a>]</td>     

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>

</tr>



<tr id="tr<?php echo $i;?>">

<td><font face="Arial, Helvetica, sans-serif"></font></td>

<td><font face="Arial, Helvetica, sans-serif">Address</font></td>

<td><font face="Arial, Helvetica, sans-serif">Home Phone</font></td>

<td><font face="Arial, Helvetica, sans-serif">Mobile</font></td>

<td><font face="Arial, Helvetica, sans-serif">E-mail</font></td>

</tr>



<tr id="tr<?php echo $i;?>">

<td><font face="Arial, Helvetica, sans-serif"></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>

</tr>



<tr id="tr<?php echo $i;?>">

<td><font face="Arial, Helvetica, sans-serif"></font></td>

<td><font face="Arial, Helvetica, sans-serif">Registration</font></td>

<td><font face="Arial, Helvetica, sans-serif">National Insurance</font></td>

<td><font face="Arial, Helvetica, sans-serif">Date Entered</font></td>

<td><font face="Arial, Helvetica, sans-serif">Personal Login</font></td>

</tr>



<tr id="tr<?php echo $i;?>">

<td><font face="Arial, Helvetica, sans-serif"></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>

</tr>







<?php

$i++;

}

?>

</html>

Any help would be greatly appreciated, and could salvage what is left of Christmas!!!!!

IDs must be *UNIQUE* on a page. When you use the same ID more than once, then some browsers will find the first one and some just won't find it.

You could use the same *basic* ID but then append a suffix, say "A","B","C","D".

But there are more clever ways that would avoid ids altogether.

By the way the <font> tag is way way way obsolete.

Learn to use CSS classes instead!

Here's a demo of what you COULD do. Notice that it doesn't care how many detail lines there are per header line.

Notice there are no <font> tags.

Notice that the JS code is "unobtrusive" and depends only on the id of the table and the class name "header" for header rows.

Code:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#myTable td { 

    font-family: Arial, Helvetica, sans-serif;

}

#myTable tr.header td {

    font-weight: bold;

    font-style: italic;

}

td.hider {

    font-weight: normal;

    font-style: normal;

    text-decoration: underline;

    color: blue;

    cursor: pointer;

}

</style>

<body>

<div>

<table id="myTable" border="1">

<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row A</td></tr>

<tr><td></td><td>Detail</td><td>1</td></tr>

<tr><td></td><td>Detail</td><td>2</td></tr>

<tr><td></td><td>Detail</td><td>3</td></tr>

<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row B</td></tr>

<tr><td></td><td>Detail</td><td>1</td></tr>

<tr><td></td><td>Detail</td><td>2</td></tr>

<tr><td></td><td>Detail</td><td>3</td></tr>

<tr><td></td><td>Detail</td><td>4</td></tr>

<tr><td></td><td>Detail</td><td>5</td></tr>

<tr><td></td><td>Detail</td><td>6</td></tr>

<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row C</td></tr>

<tr><td></td><td>Detail</td><td>1</td></tr>

<tr><td></td><td>Detail</td><td>2</td></tr>

<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row D</td></tr>

<tr><td></td><td>Detail</td><td>1</td></tr>

<tr><td></td><td>Detail</td><td>2</td></tr>

<tr><td></td><td>Detail</td><td>3</td></tr>

</table>

</div>



<script type="text/javascript">

(

  function() 

  {

      var tbl = document.getElementById("myTable");

      for ( var r = 0; r < tbl.rows.length; ++r )

      {

          var row = tbl.rows[r];

          if ( row.className == "header" )

          {

              row.cells[0].onclick = showHide;

          }

      }

      function showHide( )

      {

          var currow = this.parentNode;

          // find currow in all rows

          for ( var r = 0; r < tbl.rows.length; ++r )

          {

              if ( currow == tbl.rows[r] ) break;

          }

          // are we hiding or showing?

          var hide = ( this.innerHTML.toLowerCase().indexOf("hide") >= 0 )

          // first of all, change the message:

          this.innerHTML = hide ? "show detail" : "hide detail";

 

          // now show/hide all subordinate detail rows:

          while( true )

          {

              ++r; // to next row

              var row = tbl.rows[r];

              if ( row.className == "header" ) break; // done!

              row.style.display = hide ? "none" : "table-row";

          }

      }

  }

)();

</script>

</body>

</html>

By the by, a comment on you PHP/SQL code.

Code:

$query="SELECT * FROM staffinformation WHERE Team= 'Juventus'";

You have no ORDER BY clause in that SQL. So you are completely at the mercy of the database as to what order the records will be shown in. No, they will *NOT* always be shown in the order you think they will. If, for example, you deleted a record in the staffinformation table and later added a new record, the new record would likely appear in the place where the deleted record had appeared, almost surely out of your expected order.

It may be working now, but it's very very poor database practice to depend on it working forever.

Many thanks for the help Old Pedant (and the advice) I think I have been running before walking properly and need to go back over things like CSS. The code on hiding the rows is great but I can't get it to work when generating the rows from a database, it only works for the top row. Is there a way to adapt this or will this method only work for a set table?