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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post

    outerHTML Problem in FireFox

    I need to read data from the first table on a given page. I cannot change the page I need to read in any way but it does live in the same domain. I load the frame into an iframe then proceed to read it. I have broken it down into a simple example without the iframe to show my problem:

    Code:
    <table>
    	<tr>
    		<td>Row 1 | Cell 1</td>
    		<td>Row 1 | Cell 2</td>
    		<td>Row 1 | Cell 3</td>
    	</tr>
    	<tr>
    		<td>Row 2 | Cell 1</td>
    		<td>Row 2 | Cell 2</td>
    		<td>Row 2 | Cell 3</td>
    	</tr>
    	<tr>
    		<td>Row 3 | Cell 1</td>
    		<td>Row 3 | Cell 2</td>
    		<td>Row 3 | Cell 3</td>
    	</tr>
    </table>	
    	
    		
    
    <script type="text/javascript">
    var info=document.getElementsByTagName("table")[0].rows;
    alert(info.length);
    for(var i=0; i<info.length; i++){
    	alert(info[i].outerHTML)
    }
    </script>
    In IE it works as expected. It first alerts 3 to indicate there are three rows in the table then it alerts the contents of each row to me. In FireFox, however, it will alert 3 to indicate the number of rows but the call for the outerHTML just alerts undefined for each of the rows.

    So how does outerHTML work in FireFox?

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Maybe i'm wrong but i thought that outerHTML is only supported by IE and Opera. You need to use innerHTML instead or firstChild.nodeValue.

    dumpfi

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didnt know you could turn a regular variable into an array without first assigning the array constructor:

    Code:
    <script type="text/javascript">
    var info=document.getElementsByTagName("table")[0].rows;
    alert(info.length);
    for(var i=0; i<info.length; i++){
    	alert( info[ i ].outerHTML)
    }
    </script>
    Why have the array constructor if you can do what you did above?
    LovesWar

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    First, the rows property returns an object, not an array.

    Second, in many cases you don't need an array / object from any of the available functions / properties but an custom array / object which holds or which you can assign the data you need.

    dumpfi

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    If I just wanted the innerHTML I would have used that. I need to read in attributes and values that are found within the <tr> tag. I guess I should have made that more clear in my example, my bad. A little more research on my part gave me what I needed. Instead of just checking the entire outerHTML I am now checking for specific attributes and classes using:

    node.className

    and

    node.getAttribute("attribute")

    and that works in all compliant browsers and is more efficient to boot.
    Last edited by JohnKrutsch; 08-08-2004 at 08:17 PM.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just FYI:
    instead of enumerating attributes, something like this could work for that.
    Code:
    <script type="text/javascript">
    var elem,
        info = document.getElementsByTagName("table")[0].rows,
          ln = info.length,
           i = -1;
    while(++i < ln)
     {
       elem = document.createElement("table");
       elem.appendChild(info[i].cloneNode(true));
       alert(elem.innerHTML);
     }
    </script>

    Also, I believe "collection" is the proper term (rather than "array"...).
    Modesty is often lacking in our transactions.

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am still confused. I thought that if you wanted to create an array/collection/grouping, that you had to do something like this:

    Code:
    var info= new Array();
    In the above, the variable is an array, an empty collections storage box, as it were. But here is what was written:

    Code:
    var info=document.getElementsByTagName("table")[0].rows;
    Am i then to understand that the variable info in the above is not a regular array/collection because of the fact that it is representing the rows object? Is this why the below is acceptable:

    Code:
    alert( info[ i ].outerHTML)
    I dont get it.
    LovesWar

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, its the proper term, but that's only if you are into splitting atoms:

    Also, I believe "collection" is the proper term (rather than "array"...).
    To me a collection is just the same as an array, and an array in the end is a grouping of some kind.
    LovesWar

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JohnKrutsch
    If I just wanted the innerHTML I would have used that. I need to read in attributes and values that are found within the <tr> tag.
    And wouldn't the innerHTML of tbody have done just that??

    .....Willy

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Willy: I don't think so because I need to evaluate each row and decide what to do based on the class and other attributes of that particular row. So looping through the rows that are returned and using node.className and node.getAttribute("attribute") solved my problem splendidly.

    SpiritualStorms: yes, there are lots of collections on a web page that you can read like an array that are not specifically set up as arrays by the programmer. For example document.forms is a collection of all of the forms on your page you can access the first form on the page like so:

    document.forms[0]

    and the second form:

    document.forms[1]

    etc..

    The same is true for all of the images on your page; document.images and even all of the links on your page; document.links.

    While these are not user defined arrays they are collections that the browser automatically organizes for you.

  • #11
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SpiritualStorms
    I dont get it.
    Well, I don't either, but like to think of it this way:
    'rows' is a property of 'table[0]' that returns a collection, and 'info' is a reference to that, and 'info[i]' is a member of it
    Modesty is often lacking in our transactions.

  • #12
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand most of this:

    SpiritualStorms: yes, there are lots of collections on a web page that you can read like an array that are not specifically set up as arrays by the programmer. For example document.forms is a collection of all of the forms on your page you can access the first form on the page like so:

    document.forms[0]

    and the second form:

    document.forms[1]

    etc..

    The same is true for all of the images on your page; document.images and even all of the links on your page; document.links.

    While these are not user defined arrays they are collections that the browser automatically organizes for you.
    But what i didnt get is how a regular variable that was declared as a regular variable was all of the sudden turned into an array, or a collection. It just seems like i learn a whole lot of syntax, but then i see others use code, and they dont follow syntax. I was always under the impression that programmer had to use the array constructor as a means of having user-defined arrays, or collections.
    LovesWar

  • #13
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So i was sort of right?

    Well, I don't either, but like to think of it this way:

    'rows' is a property of 'table[0]' that returns a collection, and 'info' is a reference to that, and 'info[i]' is a member of it
    So if i do something like,

    Code:
    var imgGroup=documentimages[0]
    that i could now use my variable as an array? In other words, i could i then do something like,

    Code:
     alert(imgGroup[3])
    ?
    LovesWar

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    No. It should be:

    var imgGroup = document.images;
    alert(imgGroup[0].src);

    if you do:

    var imgGroup=document.images[0];

    you're only accessing the first element in the images collection, not the collection itself.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #15
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But why would i have to include the src property?

    No. It should be:

    var imgGroup = document.images;
    alert(imgGroup[0].src);

    if you do:

    var imgGroup=document.images[0];

    you're only accessing the first element in the images collection, not the collection itself.
    LovesWar


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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