Hide multiple elements by name

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Jochen Daum

    Hide multiple elements by name

    Hi!

    I have a dynamically generated page (PHP), which contains an Explorer
    like view of items. I would like to hide multiple <tr>'s by name, but
    I can't figure out how thats done.

    I have this code to hide one element by id

    if (document.getEl ementById(id)){
    document.getEle mentById(id).st yle.position = 'relative';
    document.getEle mentById(id).st yle.display = 'none';
    }

    Anyone has a cod sample for looping through multiple elements and hide
    them?

    Jochen
    --
    Jochen Daum - CANS Ltd.
    PHP DB Edit Toolkit -- PHP scripts for building
    database editing interfaces.
    Download PHP DB Edit Toolkit for free. PHP DB Edit Toolkit is a set of PHP classes makes the generation of database edit interfaces easier and faster. The main class builds tabular and form views based on a data dictionary and takes over handling of insert/update/delete and user input.

  • Janwillem Borleffs

    #2
    Re: Hide multiple elements by name

    Jochen Daum wrote:[color=blue]
    > Hi!
    >
    > I have a dynamically generated page (PHP), which contains an Explorer
    > like view of items. I would like to hide multiple <tr>'s by name, but
    > I can't figure out how thats done.
    >[/color]
    ....[color=blue]
    > Anyone has a cod sample for looping through multiple elements and hide
    > them?
    >[/color]

    <script type="text/javascript">
    function hide(t, id) {
    var tags = document.getEle mentsByTagName( t);
    for (var i = 0; i < tags.length; i++) {
    if (tags[i].id == id) {
    tags[i].style.display = 'none';
    }
    }
    }
    </script>

    .....
    <div id="sid">A</div>
    <div id="impid">B</div>
    <div id="sid">C</div>
    <div id="impid">D</div>

    .....
    <a href="#" onclick="hide(' div','sid');ret urn false">Hide divs</a>

    .....

    HTH;
    JW



    Comment

    • Michael Winter

      #3
      Re: Hide multiple elements by name

      On Wed, 21 Jan 2004 23:39:17 +0100, Janwillem Borleffs <jw@jwscripts.c om>
      wrote:

      <snip>
      [color=blue]
      > <div id="sid">A</div>
      > <div id="impid">B</div>
      > <div id="sid">C</div>
      > <div id="impid">D</div>[/color]

      <snip>

      Which is, of course, invalid HTML.

      Mike

      --
      Michael Winter
      M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

      Comment

      • Janwillem Borleffs

        #4
        Re: Hide multiple elements by name

        Michael Winter wrote:[color=blue]
        > Which is, of course, invalid HTML.
        >[/color]

        What is invalid about that?

        JW



        Comment

        • Jochen Daum

          #5
          Re: Hide multiple elements by name

          Hi Janwillem!

          On Wed, 21 Jan 2004 23:39:17 +0100, "Janwillem Borleffs"
          <jw@jwscripts.c om> wrote:
          [color=blue]
          >Jochen Daum wrote:[color=green]
          >> Hi!
          >>
          >> I have a dynamically generated page (PHP), which contains an Explorer
          >> like view of items. I would like to hide multiple <tr>'s by name, but
          >> I can't figure out how thats done.
          >>[/color]
          >...[color=green]
          >> Anyone has a cod sample for looping through multiple elements and hide
          >> them?
          >>[/color]
          >
          ><script type="text/javascript">
          > function hide(t, id) {
          > var tags = document.getEle mentsByTagName( t);
          > for (var i = 0; i < tags.length; i++) {
          > if (tags[i].id == id) {
          > tags[i].style.display = 'none';
          > }
          > }
          > }
          ></script>
          >[/color]
          Wouldn't that also be working with any tag, if I did it like this. It
          doesn't give me an error, but it doesn't work either:

          function hide_elements_b y_name(me,id, pluspic){

          var tags = document.getEle mentsByName(id) ;
          for (var i = 0; i < tags.length; i++) {
          if (tags[i].name == id) {
          tags[i].style.display = 'none';
          }
          }
          }

          and the tags being:

          <tr name="xyz">

          ??

          Jochen

          [color=blue]
          >....
          ><div id="sid">A</div>
          ><div id="impid">B</div>
          ><div id="sid">C</div>
          ><div id="impid">D</div>
          >
          >....
          ><a href="#" onclick="hide(' div','sid');ret urn false">Hide divs</a>
          >
          >....
          >
          >HTH;
          >JW
          >
          >[/color]

          --
          Jochen Daum - CANS Ltd.
          PHP DB Edit Toolkit -- PHP scripts for building
          database editing interfaces.
          Download PHP DB Edit Toolkit for free. PHP DB Edit Toolkit is a set of PHP classes makes the generation of database edit interfaces easier and faster. The main class builds tabular and form views based on a data dictionary and takes over handling of insert/update/delete and user input.

          Comment

          • Janwillem Borleffs

            #6
            Re: Hide multiple elements by name

            Michael Winter wrote:[color=blue]
            > Which is, of course, invalid HTML.
            >[/color]

            Never mind, see what you mean.

            JW



            Comment

            • Jochen Daum

              #7
              Re: Hide multiple elements by name

              Hi!

              On Thu, 22 Jan 2004 00:27:04 +0100, "Janwillem Borleffs"
              <jw@jwscripts.c om> wrote:
              [color=blue]
              >Michael Winter wrote:[color=green]
              >> Which is, of course, invalid HTML.
              >>[/color]
              >
              >Never mind, see what you mean.
              >[/color]
              Does he mean the double use of an id?

              Jochen
              --
              Jochen Daum - CANS Ltd.
              PHP DB Edit Toolkit -- PHP scripts for building
              database editing interfaces.
              Download PHP DB Edit Toolkit for free. PHP DB Edit Toolkit is a set of PHP classes makes the generation of database edit interfaces easier and faster. The main class builds tabular and form views based on a data dictionary and takes over handling of insert/update/delete and user input.

              Comment

              • Janwillem Borleffs

                #8
                Re: Hide multiple elements by name

                Jochen Daum wrote:[color=blue]
                > Does he mean the double use of an id?
                >[/color]

                Yep


                Comment

                • Janwillem Borleffs

                  #9
                  Re: Hide multiple elements by name

                  Jochen Daum wrote:[color=blue]
                  > Wouldn't that also be working with any tag, if I did it like this. It
                  > doesn't give me an error, but it doesn't work either:
                  >
                  > function hide_elements_b y_name(me,id, pluspic){
                  >
                  > var tags = document.getEle mentsByName(id) ;[/color]

                  AFAIK, document.getEle mentsByTagName only applies to form elements.


                  JW



                  Comment

                  • Lasse Reichstein Nielsen

                    #10
                    Re: Hide multiple elements by name

                    "Janwillem Borleffs" <jw@jwscripts.c om> writes:
                    [color=blue][color=green]
                    >>
                    >> var tags = document.getEle mentsByName(id) ;[/color]
                    >
                    > AFAIK, document.getEle mentsByTagName only applies to form elements.[/color]

                    No, any DOM Node has getElementsByTa gName as a method. If you meant
                    getElementsByNa me, DOM 2 says:

                    getElementsByNa me
                    With [HTML 4.01] documents, this method returns the (possibly empty)
                    collection of elements whose name value is given by elementName. In
                    [XHTML 1.0] documents, this methods only return the (possibly empty)
                    collection of form controls with matching name. This method is case
                    sensitive.

                    So yes and no, in XHTML it's only form controls. In HTML, it's
                    anything with a name attribute.

                    /L
                    --
                    Lasse Reichstein Nielsen - lrn@hotpop.com
                    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
                    'Faith without judgement merely degrades the spirit divine.'

                    Comment

                    • Randy Webb

                      #11
                      Re: Hide multiple elements by name

                      Janwillem Borleffs wrote:
                      [color=blue]
                      > Jochen Daum wrote:
                      >[color=green]
                      >>Wouldn't that also be working with any tag, if I did it like this. It
                      >>doesn't give me an error, but it doesn't work either:
                      >>
                      >>function hide_elements_b y_name(me,id, pluspic){
                      >>
                      >> var tags = document.getEle mentsByName(id) ;[/color]
                      >
                      >
                      > AFAIK, document.getEle mentsByTagName only applies to form elements.
                      >[/color]

                      <div>test</div>
                      <script type="text/javascript">
                      alert(document. getElementsByTa gName('div'))
                      </script>

                      IE6: alerts [object]
                      Opera 7: alerts [object nodeList]
                      NS7: alerts [object HTMLCollection]

                      <script type="text/javascript">
                      alert(document. getElementsByNa me('myDiv'))
                      </script>

                      Gives similar results.

                      I hunted a reference on MSDN but obviously didn't know where to hunt it :(

                      --
                      Randy
                      Chance Favors The Prepared Mind

                      Comment

                      • Michael Winter

                        #12
                        Re: Hide multiple elements by name

                        On Thu, 22 Jan 2004 00:46:28 +0100, Janwillem Borleffs <jw@jwscripts.c om>
                        wrote:
                        [color=blue]
                        > Jochen Daum wrote:[color=green]
                        >> Wouldn't that also be working with any tag, if I did it like this. It
                        >> doesn't give me an error, but it doesn't work either:
                        >>
                        >> function hide_elements_b y_name(me,id, pluspic){
                        >>
                        >> var tags = document.getEle mentsByName(id) ;[/color]
                        >
                        > AFAIK, document.getEle mentsByTagName only applies to form elements.[/color]

                        Using

                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                        "http://www.w3.org/TR/html4/strict.dtd">

                        <html lang="en" dir="ltr">
                        <head>
                        <meta http-equiv="Content-Type"
                        content="text/html; charset=ISO-8859-1">
                        <meta http-equiv="Content-Script-Type" content="text/javascript">
                        <meta http-equiv="Content-Style-Type" content="text/css">
                        ...

                        and calling

                        alert( document.getEle mentsByTagName( 'meta').length );

                        returns '3'.

                        Mike

                        --
                        Michael Winter
                        M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

                        Comment

                        • Jochen Daum

                          #13
                          Re: Hide multiple elements by name

                          Hi!

                          On Wed, 21 Jan 2004 19:17:37 -0500, Randy Webb
                          <hikksnotathome @aol.com> wrote:
                          [color=blue]
                          >Janwillem Borleffs wrote:
                          >[color=green]
                          >> Jochen Daum wrote:
                          >>[color=darkred]
                          >>>Wouldn't that also be working with any tag, if I did it like this. It
                          >>>doesn't give me an error, but it doesn't work either:
                          >>>
                          >>>function hide_elements_b y_name(me,id, pluspic){
                          >>>
                          >>> var tags = document.getEle mentsByName(id) ;[/color]
                          >>
                          >>
                          >> AFAIK, document.getEle mentsByTagName only applies to form elements.
                          >>[/color]
                          >
                          ><div>test</div>
                          ><script type="text/javascript">
                          >alert(document .getElementsByT agName('div'))
                          ></script>
                          >
                          >IE6: alerts [object]
                          >Opera 7: alerts [object nodeList]
                          >NS7: alerts [object HTMLCollection]
                          >
                          ><script type="text/javascript">
                          >alert(document .getElementsByN ame('myDiv'))
                          ></script>
                          >
                          >Gives similar results.
                          >
                          >I hunted a reference on MSDN but obviously didn't know where to hunt it :([/color]

                          Find official documentation, practical know-how, and expert guidance for builders working and troubleshooting in Microsoft products.


                          Like always, its not fully described. It returns a collection, but an
                          empty one.

                          This works


                          var tags = document.body.g etElementsByTag Name('tr');

                          for (var i = 0; i < tags.length; i++) {
                          if (tags[i].name == id) {
                          tags[i].style.display = 'none';
                          }
                          }

                          and doesn't work with getElementsByNa me




                          HTH, Jochen
                          --
                          Jochen Daum - CANS Ltd.
                          PHP DB Edit Toolkit -- PHP scripts for building
                          database editing interfaces.
                          Download PHP DB Edit Toolkit for free. PHP DB Edit Toolkit is a set of PHP classes makes the generation of database edit interfaces easier and faster. The main class builds tabular and form views based on a data dictionary and takes over handling of insert/update/delete and user input.

                          Comment

                          Working...