Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.



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




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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •