Show/Hide Table Rows in Webpage

Discussion in 'Javascript' started by pmind, Oct 5, 2009.

  1. pmind

    pmind Guest

    Hello All,

    I have an existing webpage which contains a table of projects. One of
    the table fields contains the status of the project (open or closed).
    My goal is create a script to show/hide the completed project rows,
    making it visually simpler for the user, and to initiate the script
    with a single button click at the top of the table. I have succeeded
    only in being able to show/hide the first row that I identified in the
    code; any additional rows identified are not affected. Can anyone tell
    me how I might modify this code to create the effect I’m looking for?
    I’m not opposed to a new approach, but it would be nice to tweek what
    I’ve already done if possible. I should point out that I am, at best,
    a novice programmer. Here is the code I’ve added:

    (just above the table)
    <script type="text/javascript">
    function displayRow(){
    var row = document.getElementById("statusCompleted");
    if (row.style.display == '') row.style.display = 'none';
    else row.style.display = '';
    }
    </script>

    (at each appropriate table row)
    <tr id="statusCompleted">

    (at the button)
    onclick= "displayRow()">

    I would be grateful for any help you can provide. Thanks, Paul
     
    pmind, Oct 5, 2009
    #1
    1. Advertising

  2. pmind wrote:

    > (just above the table)
    > <script type="text/javascript">
    > function displayRow(){
    > var row = document.getElementById("statusCompleted");
    > if (row.style.display == '') row.style.display = 'none';
    > else row.style.display = '';
    > }
    > </script>
    >
    > (at each appropriate table row)
    > <tr id="statusCompleted">


    An id attribute value should be unique in the complete document so you
    can't have several elements with the same id.

    If your table rows you want to hide/show together are adjacent in the
    table then simply put them into one tbody, give that tbody a unique id
    and use your script with that tbody.

    If the rows are not adjacent then you need some other way to identity
    them and find them with your script. Setting the class attribute could
    be one way, then loop through the rows collection of your table and look
    at the className property of each row object to decide whether it is one
    of the rows you want to show/hide.



    --

    Martin Honnen
    http://msmvps.com/blogs/martin_honnen/
     
    Martin Honnen, Oct 5, 2009
    #2
    1. Advertising

  3. pmind

    Evertjan. Guest

    pmind wrote on 05 okt 2009 in comp.lang.javascript:

    > I’ve already done if possible. I should point out that I am, at best,
    > a novice programmer. Here is the code I’ve added:
    >
    > (just above the table)


    scripts should be in the header, if they just define a function

    > <script type="text/javascript">
    > function displayRow(){


    The function is a toggle, not display
    appropriate function naming is essential for later debugging.

    > var row = document.getElementById("statusCompleted");
    > if (row.style.display == '') row.style.display = 'none';
    > else row.style.display = '';
    >}


    Use:

    function toggleElement(x) {
    x.style.display =
    (x.style.display =='') ?'none' : '';
    }

    > </script>


    >
    > (at each appropriate table row)
    > <tr id="statusCompleted">


    id must be unique

    try:

    var myTable = document.getElementById('myTable')

    onclick = 'toggleElement(myTable.row[17])'

    for row nr 17, not tested


    > (at the button)
    > onclick= "displayRow()">
    >
    > I would be grateful for any help you can provide. Thanks, Paul




    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 5, 2009
    #3
  4. pmind

    DonO Guest

    On Oct 5, 10:37 am, pmind <> wrote:
    > Hello All,
    >
    > I have an existing webpage which contains a table of projects. One of
    > the table fields contains the status of the project (open or closed).
    > My goal is create a script to show/hide the completed project rows,
    > making it visually simpler for the user, and to initiate the script
    > with a single button click at the top of the table. I have succeeded
    > only in being able to show/hide the first row that I identified in the
    > code; any additional rows identified are not affected. Can anyone tell
    > me how I might modify this code to create the effect I’m looking for?
    > I’m not opposed to a new approach, but it would be nice to tweek what
    > I’ve already done if possible. I should point out that I am, at best,
    > a novice programmer. Here is the code I’ve added:
    >
    > (just above the table)
    > <script type="text/javascript">
    > function displayRow(){
    > var row = document.getElementById("statusCompleted");
    > if (row.style.display == '')  row.style.display = 'none';
    > else row.style.display = '';}
    >
    > </script>
    >
    > (at each appropriate table row)
    > <tr id="statusCompleted">
    >
    > (at the button)
    > onclick= "displayRow()">
    >
    > I would be grateful for any help you can provide. Thanks, Paul



    I've built the following....

    function show_hide(inShowItems, inHideItems){

    if(inShowItems != ''){
    var sItems = inShowItems.split(",");
    for (var i = 0; i < sItems.length; i++) {
    document.getElementById(sItems).style.display=''; }
    }
    if(inHideItems != ''){
    var hItems = inHideItems.split(",");
    for (var j = 0; j < hItems.length; j++) {
    document.getElementById(hItems[j]).style.display='none'; }
    }
    }

    You call is like so... show_hide('show','hide');

    for multiple items to show/hide, separate with a comma and NO SPACE
    like ('show,these,items')

    HTH
    D.
     
    DonO, Oct 5, 2009
    #4
  5. pmind

    pmind Guest

    Evertjan,

    Many thanks for the helpful suggestions. I've moved the script into
    the header and modified it as suggested. However, I'm not sure I
    understand this bit correctly:

    > var myTable = document.getElementById('myTable')

    Where does this belong? Inside or outside of the script?

    > onclick = 'toggleElement(myTable.row[17])'
    > for row nr 17, not tested

    The onclick belongs with the button, no problem there;
    but what is the reference to row 17? Is this just a
    random example of a row number?

    Although there is only one table on the page currently,
    do I need to add a statement defining which table I'm referring to?

    Thanks again, Paul
     
    pmind, Oct 5, 2009
    #5
  6. Martin Honnen wrote:

    > pmind wrote:
    >> (at each appropriate table row)
    >> <tr id="statusCompleted">

    >
    > An id attribute value should be unique in the complete document so you
    > can't have several elements with the same id.


    s/should/MUST/


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Oct 5, 2009
    #6
  7. pmind

    Evertjan. Guest

    pmind wrote on 05 okt 2009 in comp.lang.javascript:

    > Evertjan,
    >
    > Many thanks for the helpful suggestions. I've moved the script into
    > the header and modified it as suggested. However, I'm not sure I
    > understand this bit correctly:
    >
    >> var myTable = document.getElementById('myTable')

    > Where does this belong? Inside or outside of the script?


    It is javascript,
    so putting it outside the script would only show the html text.

    I hope you mean inside or outside the function.

    It must be inside the function if the script is above the table,
    [or you should put it in a onload type function]
    because it can only find the table if that table then exists in the DOM.


    >> onclick = 'toggleElement(myTable.row[17])'
    >> for row nr 17, not tested

    > The onclick belongs with the button, no problem there;
    > but what is the reference to row 17? Is this just a
    > random example of a row number?


    An example.

    I am not at all clear what you want to do, but specifying the row must be
    one of the things you want to do if you want to change the display mode.

    > Although there is only one table on the page currently,
    > do I need to add a statement defining which table I'm referring to?


    Yes, you need to have a reference to a table if you want to use row
    number identification.

    A document does not have rows,
    a div does not have rows,
    how is the script to know what DOM element you mean?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 5, 2009
    #7
  8. pmind

    Evertjan. Guest

    Thomas 'PointedEars' Lahn wrote on 05 okt 2009 in comp.lang.javascript:

    > Martin Honnen wrote:
    >
    >> pmind wrote:
    >>> (at each appropriate table row)
    >>> <tr id="statusCompleted">

    >>
    >> An id attribute value should be unique in the complete document so you
    >> can't have several elements with the same id.

    >
    > s/should/MUST/


    No, you only should not.

    You can easily put in a number of same id-ed DOM elements,
    and wait for the error recovery of the different browsers to do something,
    like perhapse only seeing the top id, but you should not do that,
    because it is a silly thing to do.

    Doing silly things is even tautologically silly, but not forbidden.

    Perhaps the German words "muss" and "sol" did put you off,
    like they usually do to me in the other direction?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 5, 2009
    #8
  9. pmind

    Evertjan. Guest

    Stefan Weiss wrote on 06 okt 2009 in comp.lang.javascript:

    >> No, you only should not.

    >
    > Actually, if you want the document to be valid (X)HTML, id attribute
    > values "MUST" be unique.


    >| id = name [CS]
    >| This attribute assigns a name to an element. This name must be
    >| unique in a document.
    >
    > [quoted from the HTML 4.01 specs]
    >
    >> You can easily put in a number of same id-ed DOM elements,
    >> and wait for the error recovery of the different browsers to do
    >> something,

    >
    > That UAs can use error correction on invalid markup is a good thing;
    > it was probably one of the deciding factors for the enormous growth
    > rate of the WWW. That doesn't change the current specification,
    > though.


    A spec saying "must" does not mean that you as a programmer, must
    follow those specs, but only that you should.

    Ihe idea is, that IF you follow those specs, THEN and only then you MUST
    use only use unique ids.

    >> Perhaps the German words "muss" and "sol" did put you off,
    >> like they usually do to me in the other direction?

    >
    > Thomas's use of upper case "MUST" is not unusual in technical
    > descriptions. There's even an RFC defining the terminology:
    > http://www.ietf.org/rfc/rfc2119.txt


    Usenet is not a technical spec.

    > The typical pitfall for German (and possibly Dutch?) native speakers


    Stefan, you SHOULD not assume about the Dutch language.

    > is that "must" translates to "muss", but "must not" doesn't mean the
    > same thing as "muss nicht". These so-called "false friend" expressions
    > have the potential to create unintentional hilarity (as in: I must not
    > go to the toilet, and even if I do, I must not pay the toilet
    > attendants).


    English has "have to", often quite unlike "habe zu".

    The hilarity level among our transponders would amount to a shameful
    silence, they just have to powder their noses in the bathroom now and
    then.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 6, 2009
    #9
  10. pmind

    pmind Guest

    Not sure about much of the above, but...

    Evertjan,

    >I hope you mean inside or outside the function.

    Sorry, I did mean the function. I told you I was a novice!

    >I am not at all clear what you want to do, but specifying the row must be
    >one of the things you want to do if you want to change the display mode.


    The purpose of the code is to show/hide rows with completed projects,
    so yes,
    you are correct. I will add the row numbers manually into the code as
    each
    project ends (they are long-term projects, so they don't change very
    often).

    I now have the following code; does this look at all right?

    (in the header)
    function toggleElement(x) {
    var myTable = document.getElementById('table1')
    x.style.display =
    (x.style.display =='') ?'none' : '';
    }
    > </script>


    (in the button)
    onclick ="toggleElement(table1.row[2])"

    Using row 2 as an example in this case.

    (at the table)
    id="table1"

    My next question is, don't I have to identify each
    row of the table with something like:

    <tr id="2">

    As the code doesn't yet work, I'm clearly missing something!

    Thanks again, Paul
     
    pmind, Oct 6, 2009
    #10
  11. pmind

    Evertjan. Guest

    Stefan Weiss wrote on 06 okt 2009 in comp.lang.javascript:

    >> Ihe idea is, that IF you follow those specs, THEN and only then you
    >> MUST use only use unique ids.

    >
    > Well, if you ignore the specs, you can write whatever you like, just
    > don't call the result valid HTML.


    Wrong.

    You cannot write whatever you like,
    if you want the user to experience what you intent him to do.

    Even if it is valid html, the browser might not follow the specs.

    BTW, this is not about HTML only, this is the Javascript NG.

    Specs.

    Specs are there to help you, not to be deified.


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 6, 2009
    #11
  12. pmind

    Evertjan. Guest

    pmind wrote on 06 okt 2009 in comp.lang.javascript:

    > I now have the following code; does this look at all right?
    >
    > (in the header)
    > function toggleElement(x) {
    > var myTable = document.getElementById('table1')


    You do not use myTable, so why put it here?


    > x.style.display =
    > (x.style.display =='') ?'none' : '';
    >}
    >> </script>

    >
    > (in the button)
    > onclick ="toggleElement(table1.row[2])"


    > Using row 2 as an example in this case.
    >
    > (at the table)
    > id="table1"


    This is exactly why you should use
    var myTable = document.getElementById('table1')
    Not al browser have the silly ideas of IE.

    > My next question is, don't I have to identify each
    > row of the table with something like:
    >
    > <tr id="2">


    An id shopud begin with a letter.

    > As the code doesn't yet work, I'm clearly missing something!


    I think you should try a working minimalistic code:

    Try thids first as a seperate test.html without altering.
    Tested working on Google Chrome.

    =============================================

    <script type='text/javascript'>
    var myTable;

    function whenLoaded(){
    myTable = document.getElementById('table1')
    };

    function toggleElement(x) {
    x.style.display =
    (x.style.display =='') ?'none' : '';
    };

    function toggleRow(t,e) {
    toggleElement(t.rows[e]);
    };
    </script>


    <body onload='whenLoaded()'>

    <table id='table1' border=1>
    <tr><td>this is row:<td>1
    <tr><td>this is row:<td>2
    <tr><td>this is row:<td>3
    <tr><td>this is row:<td>4
    <tr><td>this is row:<td>5
    <tr><td>this is row:<td>6
    </table>
    <p>
    <button onclick='toggleRow(myTable,2-1)'>
    toggle row 2</button>
    <p>
    <button onclick='toggleRow(myTable,4-1)'>
    toggle row 4</button>
    <p>
    <button onclick='toggleRow(myTable,6-1)'>
    toggle row 6</button>

    =============================================




    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 6, 2009
    #12
  13. pmind

    pmind Guest

    Evertjan,

    I tried out the test.html code above, and it does work; but this is
    not exactly what I'm trying to achieve.

    I want a single button that will toggle visibility and colapse, all of
    the rows I choose in the code. Normal state shows all rows. Clicking
    one button hides all completed project rows; or vice-versa. And as I
    am becomming more confused with each post, I would like to do this as
    simply as possible.

    My original code accomplished this for only the first row I marked
    with an ID. I just need to apply this same principal to multiple rows.
    As I said, I am clearly not an experienced programmer, nor do I have
    time to become one. But I am a pretty good mimic, so I'm just trying
    to adapt what I see on the fly, however I'm running out of time to
    devote to this task.

    To that end, and based on the code I originally posted; is there any
    way to modify this code so that it works with multiple rows in a
    table?

    Thank you for you patience, Paul.
     
    pmind, Oct 6, 2009
    #13
  14. Evertjan. kirjoitti:

    > An id shopud begin with a letter.


    Not shopud! MUST!

    --
    Best wishes,
    Osmo
     
    Osmo Saarikumpu, Oct 6, 2009
    #14
  15. pmind

    Evertjan. Guest

    pmind wrote on 06 okt 2009 in comp.lang.javascript:

    > Evertjan,
    >
    > I tried out the test.html code above, and it does work; but this is
    > not exactly what I'm trying to achieve.


    That is what I thought.

    But I also thought it must[!] be an insult to your intelligence to do all
    the programming for you.

    > I want a single button that will toggle visibility and colapse, all of
    > the rows I choose in the code. Normal state shows all rows. Clicking
    > one button hides all completed project rows; or vice-versa. And as I
    > am becomming more confused with each post, I would like to do this as
    > simply as possible.


    My example was to teach you one possible way to achieve what it did, so
    please peruse the three functions till you know exactly what they do,
    changing small things and see what happens.

    > My original code accomplished this for only the first row I marked
    > with an ID. I just need to apply this same principal to multiple rows.


    That should be simple.
    Try and show some examples of your work, and show where they go wrong if
    they do.

    > As I said, I am clearly not an experienced programmer, nor do I have
    > time to become one.


    Oh, but that does not mean that we should do your work.
    That would be mean to you as you can learn so much from this little
    exersize in logic called programming.

    > But I am a pretty good mimic, so I'm just trying
    > to adapt what I see on the fly, however I'm running out of time to
    > devote to this task.


    As I said, that argument has no effect in this NG, it is not a paid
    helpdesk.

    It is not the task that I was helping you with, but the way you can learn
    from it.

    > To that end, and based on the code I originally posted; is there any
    > way to modify this code so that it works with multiple rows in a
    > table?


    Simple programming will do.

    How do you do three different things in a script function?

    > Thank you for you patience, Paul.


    Thank you for yours.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 6, 2009
    #15
  16. Osmo Saarikumpu wrote:

    > Evertjan. kirjoitti:
    >> An id shopud begin with a letter.

    >
    > Not shopud! MUST!


    LOL


    PointedEars
     
    Thomas 'PointedEars' Lahn, Oct 7, 2009
    #16
  17. pmind

    Evertjan. Guest

    Thomas 'PointedEars' Lahn wrote on 07 okt 2009 in comp.lang.javascript:

    > Osmo Saarikumpu wrote:
    >
    >> Evertjan. kirjoitti:
    >>> An id shopud begin with a letter.

    >>
    >> Not shopud! MUST!

    >
    > LOL


    You both seem to lack any understanding of Kwazulu!


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 7, 2009
    #17
  18. pmind

    pmind Guest

    Evertjan,

    With your help, I have succeeded in incorporating function into the
    webpage.
    The only question I still have is; how do I hide more than one row
    with a single
    button? I've tried using various delimiters in the string without much
    luck.

    (on this line)
    <button onclick='toggleRow(myTable,2-1)'>

    (tried)
    <button onclick='toggleRow(myTable,2-1,3-1)'>
    -only hides row 2, not 2 & 3

    (and)
    <button onclick='toggleRow(myTable,2-1;3-1)'>
    -does nothing at all

    But, still no joy. Any ideas? Should I take a different approach?
    Once again, thanks.
     
    pmind, Oct 7, 2009
    #18
  19. pmind

    Evertjan. Guest

    pmind wrote on 07 okt 2009 in comp.lang.javascript:

    > Evertjan,
    >
    > With your help, I have succeeded in incorporating function into the
    > webpage.
    > The only question I still have is; how do I hide more than one row
    > with a single
    > button? I've tried using various delimiters in the string without much
    > luck.
    >
    > (on this line)
    > <button onclick='toggleRow(myTable,2-1)'>


    Do you understansd why i wrote 2-1 and not just 1 ?

    >
    > (tried)
    > <button onclick='toggleRow(myTable,2-1,3-1)'>


    Was my function toggleRow() defined to use 3 parameters?

    I think not

    > -only hides row 2, not 2 & 3
    >
    > (and)
    > <button onclick='toggleRow(myTable,2-1;3-1)'>
    > -does nothing at all


    A script language is not like a natural language where you can just play
    with idiom and others will still understand!

    > But, still no joy. Any ideas? Should I take a different approach?
    > Once again, thanks.


    There are a miriad of solutions

    You could rewrite the toggleRow() function,

    You could just call toggleRow() thre times with different parameters.

    You could write a new function calling toggleRow() three times with
    different parameters.

    etc, etc, etc.

    Progress from the point where you just want to use otherman's scripts,
    and try your hand at your own, using valid Javascript and not plain
    English idiom.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 7, 2009
    #19
  20. pmind

    pmind Guest

    Back were I started; a complete waste of 2 days. Poor form, indeed.
     
    pmind, Oct 7, 2009
    #20
    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. RA
    Replies:
    1
    Views:
    4,054
  2. JDP@Work

    Show Hide Table(s), Rows & Cells w/out a postback

    JDP@Work, Apr 20, 2006, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    217
    JDP@Work
    Apr 20, 2006
  3. Harry

    Dynamically Show/Hide table rows?

    Harry, Sep 3, 2003, in forum: Javascript
    Replies:
    3
    Views:
    416
    Vjekoslav Begovic
    Sep 3, 2003
  4. KathyB
    Replies:
    2
    Views:
    169
    Kathy Burke
    Sep 29, 2003
  5. Mark

    Show / Hide Table Rows

    Mark, Oct 20, 2003, in forum: Javascript
    Replies:
    2
    Views:
    200
    Louise Woodward
    Oct 23, 2003
Loading...

Share This Page