Show / Hide a table row
Results 1 to 10 of 10

Thread: Show / Hide a table row

  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    5

    Show / Hide a table row

    Hi

    New to this and have hit a wall.....

    I have a table with about 30 rows of information from a MySQL database, but instead of showig all the information I want just the headline information then a button on the side that a user can click to see the additional information for that row.

    Could anyone advise to what the best way to approach this would be.

    I searched the internet but having gone down the javascript route I found out that it is incompatable with Php, do I need to learn learn AJAX or Jscript, or can a php function do it?

    I'm seriously getting confused, it seemed an easy thing to do about three days back....

    any help or direction would be greatly appreciated.

  2. #2
    Settled 4 red convertible dalecosp's Avatar
    Join Date
    Jul 2002
    Location
    Accelerating Windows at 9.81 m/s....
    Posts
    7,697
    Concepts are important here. You can show a headline with a button; what you want to happen when the button is clicked determines the technology to be used.

    If you can allow the browser to move to a new page and show the entire "story", then you can make the display page into a PHP-generated HTML form, with headlines & buttons, and the form's action would be set to another PHP script, a "handler". The handler would read some POSTed (or perhaps, some info from the GET string) and show the "whole story".

    If you want the browser to stay on the page and show the "rest of the story" underneath the headline when this button is clicked, you need Javascript, which, by the way, isn't "incompatible with PHP". It's just a matter of knowing what to do. PHP can write plenty of Javascript to the user's browser; what it does when it's there is up to the purview of the Javascript programmer. Many of us deal with Javascript fairly regularly, but you'd be better off seeking help for that in the "Clientside Technologies" section of this forum, or another forum like "Javascriptworld" or "webmasterworld".

    HTH,
    /!!\ mysql_ is deprecated --- don't use it! Tell your hosting company you will switch if they don't upgrade! /!!!\ ereg() is deprecated --- don't use it!

    dalecosp "God doesn't play dice." --- Einstein "Perl is hardly a paragon of beautiful syntax." --- Weedpacket

    Getting Help at All --- Collected Solutions to Common Problems --- Debugging 101 --- Unanswered Posts --- OMBE: Office Machines, Business Equipment

  3. #3
    Junior Member
    Join Date
    Dec 2012
    Posts
    5
    Thanks for the reply dalecosp, still confused but i'll go back down the javascript approach if that would work.

  4. #4
    Junior Member
    Join Date
    Dec 2012
    Posts
    2
    Yeah you need ajax if you dont want another page to load, its not that complicated but when you create the table you need to put id of every row so later when you call your JS script to request ajax call you can pass on that Id, here is an example that I have in one js script.

    Code:
    function removeRow(rowId){
            $('#'+rowId).remove();
            var req = new XMLHttpRequest();        
            var url = 'checkCode.php'+'?action=removeAssignment'+'&Id='+rowId;
            var out = '';
            req.open('GET',url,true);
            req.send(null);
            req.onreadystatechange = function(){
                if (req.readyState == 4){
                    out = req.responseText;
                    /*$('#codetext').val('The code is recieved');*/
                    new Messi(out);
                    /*new Messi(out);*/
                }
            }
    yeah thats it, in the php script I look for
    PHP Code:
    $_GET['action'
    and
    PHP Code:
    $_GET['Id'
    , go fetch results from database and echo(data) thats it.
    But Im guessing you will have an array in the php script, you can then use
    PHP Code:
    echo(json_encode(data)) 
    in that case, in javascript
    change 'out' variable to
    Code:
    out = json_decode(req.responseText);
    . Basically json is just a convenient way to send array from php to javascript.

    Its really nice to have dynamic generated output.

  5. #5
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,642
    Quote Originally Posted by lolyzor View Post
    Yeah you need ajax if you dont want another page to load
    There is a third alternative, which is preloading the information while keeping it hidden (display: none). But I generally agree that AJAX is the way to go, especially in combination with jQuery

  6. #6
    Junior Member
    Join Date
    Dec 2012
    Posts
    5
    Thanks for the replies, I did try the example you gave lolyzor, but I don't think I understood it enough to get it to work.

    I did manage to get a Javascripts version working using:

    Script

    <script language="JavaScript">
    function fncShow(ctrl)
    {
    document.getElementById(ctrl).style.display = '';
    }
    function fncHide(ctrl)
    {
    document.getElementById(ctrl).style.display = 'none';
    }
    </script>

    Used a show/hide button to call them

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


    Then used this line in the table row

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


    This works fine, but the only problem I have is I want to show/hide more than one row under the top row, I thought if I gave all the rows the same title (the <tr id="tr<?php echo $i;?>">) that it would hide all the rows but it only hides one??? Any ideas?

  7. #7
    Junior Member
    Join Date
    Dec 2012
    Posts
    2
    Nice work, can you post a screenshot of how your app looks like, it may give me better understanding of your situation, I think i know what you want, but I'm not sure .
    I think you should have a button which will load next five row, if user clicks again, next five row again etc, for that we need jquery and ajax, I can show you how to do it, can you post your php and javascript code on tinypaste, and some screenshots

  8. #8
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,642
    Use
    [php]tags for php code
    [html]tags for html code[/html]
    [code]tags for other code[/code]
    And indent your code!

    Quote Originally Posted by dissy8 View Post
    <script language="JavaScript">
    Please remove 'language="JavaScript"'. There is no language attribute for the script element. And usually when an element is allowed a language attribute, it's limited to natural languages on the form "en" and "en-us".


    Quote Originally Posted by dissy8 View Post
    Code:
    document.getElementById(ctrl).style.display = '';
    Even though you use javascript to manipulate the DOM, rather than generate HTML code, there is still a rather direct correspondence. The CSS display attribute can take a few different values, but the empty string '' is not one of them. Should the above still work as you intended, it's due to faulty values usually being replaced by default values. But you can't really say if these are always the same default values in different browsers, and you really should aim for valid code at all levels.
    Try 'block';

    Moreover, I really recommend getting jQuery and start using it directly. There are far fewer discrepancies between browsers these days, but jQuery still does remove the need to know about those, and there's a good chance your web pages will continue to work for the wayward IE6, IE7 user that comes your way. Using jQuery, the above would be
    Code:
    // jQuery uses the same syntax as CSS does, so to match an id attribute value, you use
    // #tr1
    $('#'+ctrl).css('display', 'block');
    Quote Originally Posted by dissy8 View Post
    HTML Code:
    <td> [<a href="JavaScript:fncShow('tr<?php echo $i;?>');">Show</a>] [<a href="JavaScript:fncHide('tr<?php echo $i;?>');">Hide</a>]</td>     
    Generally, if you want to execute javascript code, use buttons, and use their onclick attributes. If you want it to look like a link, restyle the button. But this is usually not recommended, since people expect something looking like a link to be a link and thus to behave like a link. Moreover, when links are clicked, wether you use href or onclick, the this will contain a reference to the window, instead of the link, while when clicking a button, this will contain a reference to the button.

    Also note that you will have to solve the problem of "disappearing buttons" if you have the buttons to show rows inside the rows... That is, output those buttons next to the table, or handle mouseovers to temporarily display hidden rows that you are near so you can click to show. Or you could let the user input the row number, if there are ways for them to see the rows. Still, it's quite easy to handle manipulation using jQuery
    HTML Code:
    /* style selector used to hide rows */
    tr.poof {
    	display: none;
    }
    
    /* just to pretty things up a little */
    input[type="text"] {
    	width: 2em;
    	text-align: right;
    	margin-right: 1em;
    }
    input.showcontrol {
    	width: 10em;
    }
    input.hidecontrol {
    	width: 5em;
    }
    input + input {
    	margin-left: 1em;
    }
    /* end little pretty */
    </style>
    
    <script>
    </script>
    
    </head>
    <body>
    
    <table id="the_table">
    	<thead>
    		<tr>
    			<th>One</th>
    			<th>Two</th>
    			<th>Three</th>
    			<th>Hide</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr id="tr1">
    			<td>11</td>
    			<td>12</td>
    			<td>13</td>
    			<td><input class="hidecontrol" type="button" onclick="$(this).parent().parent().addClass('poof');" value="Hide"></td>
    		</tr>
    		<tr id="tr2">
    			<td>21</td>
    			<td>22</td>
    			<td>23</td>
    			<td><input class="hidecontrol" type="button" onclick="$(this).parent().parent().addClass('poof');" value="Hide"></td>
    		</tr>
    		<tr id="tr3">
    			<td>31</td>
    			<td>32</td>
    			<td>33</td>
    			<td><input class="hidecontrol" type="button" onclick="$(this).parent().parent().addClass('poof');" value="Hide"></td>
    		</tr>
    	</tbody>
    </table>
    <div>
    	<input class="showcontrol" type="button" onclick="$('#the_table tbody tr').toggleClass('poof');" value="Invert Hidden">
    </div>
    <div>
    	<input class="showcontrol" type="button" onclick="$('#the_table tr').removeClass('poof');" value="Show All">
    </div>
    <div>
    	<input class="showcontrol" type="button" onclick="$('#tr' + $(this).next().attr('value')).removeClass('poof');" value="Show"><input type="text" value="">
    </div>

  9. #9
    Junior Member
    Join Date
    Dec 2012
    Posts
    5
    I'm trying to get something like this:

    http://img255.imagevenue.com/loc129/..._122_129lo.JPG

    Basically one line (with the show hide/ button and name on it), then the six or so lines below it of 'additional' information I want to make optional.

    The code I've been working on is for a much more basic version below

    http://img14.imagevenue.com/loc179/t..._122_179lo.JPG

    It basically just has two lines under the main line, but I can only hide one of them at a time.

    The code is (hopefully below).

    http://tinypaste.net/XAy30jk0


    any help appreciated as it has been this far.

  10. #10
    Junior Member
    Join Date
    Dec 2012
    Posts
    5
    Looks like I could do with learning how to use this forum before starting on the php....


    This is a better version of the 1st picture
    Picture1.JPG


    And this of the 2nd picture
    Picture2.JPG

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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