Hide/Show Rows based on text box input

Discussion in 'Javascript' started by jimstruckster@gmail.com, Apr 17, 2006.

  1. Guest

    I have a table with 10 rows, I want all rows except for the first to be
    hidden when the page first opens up. If the user puts a value in a
    text box in the first row then I want the second row to display. If
    they put a value in the text box in the second row then display the
    third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
    I'm not to sure where to start. Any help would be great, thanks a lot.
     
    , Apr 17, 2006
    #1
    1. Advertising

  2. Hal Rosser Guest

    <> wrote in message
    news:...
    > I have a table with 10 rows, I want all rows except for the first to be
    > hidden when the page first opens up. If the user puts a value in a
    > text box in the first row then I want the second row to display. If
    > they put a value in the text box in the second row then display the
    > third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
    > I'm not to sure where to start. Any help would be great, thanks a lot.
    >

    Try this approach.
    Give the first <tr> tag an ID of say, "row1".
    Give tthe second <tr> tag -> like this: <tr id="row2"
    style="visibility:hidden;"> ...your stuff ... </tr>
    Give the third tr tag an id of "row3".
    (etc)
    set the visibility of all rows you want hidden in the tag.

    Then for the text box inside the FIRST row:
    <input type='text' name='firstname' id='firstname'
    onchange='makeItShow("row2",this)' />

    which would call this function: (not tested )
    //***********************************
    function makeItShow(someRow, theTextBox){
    if (theTextBox.value != ""){
    var nextRow = document.getElementById(someRow);
    nextRow.style.visiblility = "visible";
    }else {
    nextRow.style.visibility="hidden";
    }
    }
    //**************************************
    Each text box would send the id of the next row to the function.
    Try variations of this, and you should have a starting point.
    HTH
    Hal
     
    Hal Rosser, Apr 18, 2006
    #2
    1. Advertising

  3. RobG Guest

    Hal Rosser said on 18/04/2006 11:19 AM AEST:
    > <> wrote in message
    > news:...
    >
    >>I have a table with 10 rows, I want all rows except for the first to be
    >>hidden when the page first opens up. If the user puts a value in a
    >>text box in the first row then I want the second row to display. If
    >>they put a value in the text box in the second row then display the
    >>third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
    >>I'm not to sure where to start. Any help would be great, thanks a lot.
    >>

    >
    > Try this approach.
    > Give the first <tr> tag an ID of say, "row1".
    > Give tthe second <tr> tag -> like this: <tr id="row2"


    I'd not bother with IDs, just use the row index. Get the row index of
    the current row, and set the next one visible (if there is one).


    e.g.

    <title>Show Rows</title>

    <style type="text/css">
    #fred {visibility: hidden;}
    </style>

    <table>
    <tbody>
    <tr>
    <td><input onkeypress="showNext(this);">
    <tbody id="fred">
    <tr>
    <td><input onkeypress="showNext(this);">
    <tr>
    <td><input onkeypress="showNext(this);">
    </table>

    <script type="text/javascript">
    function showNext(el) {
    function getTR(el) {
    while (el.parentNode && 'tr' != el.nodeName.toLowerCase()){
    el = el.parentNode;
    }
    return ('tr' == el.nodeName.toLowerCase())? el : null;
    }
    var row = getTR(el);
    if (row){
    var t = row.parentNode.parentNode;
    var nRow = t.rows[row.rowIndex + 1];
    if (nRow && nRow.style){
    nRow.style.visibility = 'visible';
    }
    }
    }
    </script>



    Of course the style should be set with script so that the rows are
    visible by default.

    Another strategy is to also add the onkeypress functions onload, then
    each could explicitly set the following row to visible.

    Seems to me the logic here could get quite convoluted trying to work out
    which rows to show and hide - should a row be hidden if it has no
    content? Should subsequent rows be hidden too? How does a user know
    how many rows are hidden?

    The usual trick is to put a button (or similar element) on the row to
    show/hide the next one so the user is in control. It greatly reduces
    the complexity of scripting logic.


    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/FAQ>
     
    RobG, Apr 18, 2006
    #3
  4. Hal Rosser Guest

    "Tony" <> wrote in message
    news:...
    > Hal Rosser wrote:
    > > <> wrote in message
    > > news:...
    > >
    > >>I have a table with 10 rows, I want all rows except for the first to be
    > >>hidden when the page first opens up. If the user puts a value in a
    > >>text box in the first row then I want the second row to display. If
    > >>they put a value in the text box in the second row then display the
    > >>third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
    > >>I'm not to sure where to start. Any help would be great, thanks a lot.
    > >>

    > >
    > > Try this approach.
    > > Give the first <tr> tag an ID of say, "row1".
    > > Give tthe second <tr> tag -> like this: <tr id="row2"
    > > style="visibility:hidden;"> ...your stuff ... </tr>

    >
    > Be aware that visibility:hidden will still display the SPACE for the
    > row, just not the contents. That's fine if that's what the OP wants to
    > achieve.


    I agree - so another solution may be to use display = none or inline.
    Someone emailed me with that suggestion, and it sounds good too.
     
    Hal Rosser, Apr 18, 2006
    #4
  5. JRS: In article <B5X0g.5384$>, dated
    Mon, 17 Apr 2006 21:19:33 remote, seen in news:comp.lang.javascript, Hal
    Rosser <> posted :

    >function makeItShow(someRow, theTextBox){
    > if (theTextBox.value != ""){
    > var nextRow = document.getElementById(someRow);
    > nextRow.style.visiblility = "visible";
    > }else {
    > nextRow.style.visibility="hidden";
    > }
    >}


    It's generally a bad idea to duplicate code, even quite small parts,
    unnecessarily - it introduces more room for error - for example, only
    one attempt at spelling "visibility" is needed.

    This

    function makeItShow(someRow, theTextBox){ // set NextRow vis'y
    document.getElementById(someRow).style.visibility =
    theTextBox.value != "" ? "visible" : "hidden" }

    expresses what I think you meant to express, clarifies that the
    visibility of one thing is set independently of its previous state, and
    leaves no room for not setting NextRow in the "hide" case.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Apr 19, 2006
    #5
  6. Hal Rosser Guest

    "Dr John Stockton" <> wrote in message
    news:...
    > JRS: In article <B5X0g.5384$>, dated
    > Mon, 17 Apr 2006 21:19:33 remote, seen in news:comp.lang.javascript, Hal
    > Rosser <> posted :
    >
    > >function makeItShow(someRow, theTextBox){
    > > if (theTextBox.value != ""){
    > > var nextRow = document.getElementById(someRow);
    > > nextRow.style.visiblility = "visible";
    > > }else {
    > > nextRow.style.visibility="hidden";
    > > }
    > >}

    >
    > It's generally a bad idea to duplicate code, even quite small parts,
    > unnecessarily - it introduces more room for error - for example, only
    > one attempt at spelling "visibility" is needed.
    >
    > This
    >
    > function makeItShow(someRow, theTextBox){ // set NextRow vis'y
    > document.getElementById(someRow).style.visibility =
    > theTextBox.value != "" ? "visible" : "hidden" }
    >
    > expresses what I think you meant to express, clarifies that the
    > visibility of one thing is set independently of its previous state, and
    > leaves no room for not setting NextRow in the "hide" case.
    >


    I started to "play a John" with a 1-liner (or so) - but the intention was to
    make it clear and understandable to the OP, - or someone reading the posting
    as a pseudo-tutorial - and now, with your condensed version - and the
    advantages thereof - they can start off understanding - then work on
    improving their code from the bottom -drudging-inefficient code like mine to
    the clearly more compact and efficient and easier-to-maintain code like
    yours. :)
    Oh - is it true that too much documentation is bad because of the
    additional server load ?
     
    Hal Rosser, Apr 21, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ashutosh
    Replies:
    3
    Views:
    9,022
    Andrew Thompson
    Jun 16, 2005
  2. cjl
    Replies:
    1
    Views:
    10,513
    Michael Winter
    Oct 31, 2005
  3. VijayRama
    Replies:
    2
    Views:
    2,352
    Gregory A. Beamer
    Oct 12, 2009
  4. Steve Speirs
    Replies:
    0
    Views:
    162
    Steve Speirs
    Jun 27, 2003
  5. cjl
    Replies:
    7
    Views:
    199
    Thomas 'PointedEars' Lahn
    Oct 30, 2005
Loading...

Share This Page