Works in IE but not in FF - Please Help

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Don Draper
    New Member
    • Mar 2007
    • 2
    #1

    Works in IE but not in FF - Please Help

    I have multiple rows in a table that I can toggle their visibility in IE 6 using the function below. However, this does not work in FF 2.x. I can't use getElementById( ) because I need to identify multiple <TR> tags in the document.

    Can someone please show me how to recode this function below to work in both browsers. TIA.

    function hideEmptyFields _ff()
    {
    var oLink = document.getEle mentById('hidel ink')
    //var oImages = document.getEle mentsByTagName( 'TR');
    var oRows = document.all || document.getEle mentsByTagName( 'TR');

    if (oRows.length)
    {
    for (var i = 0; i < oRows.length; i++)
    {
    var oRow = oRows[i]
    if (oRow.name == 'emptyrow')
    {
    if (oRow.style.dis play == 'none')
    {
    oRow.style.disp lay = '';
    oLink.innerHTML = 'Hide Empty Fields'
    }
    else
    {
    oRow.style.disp lay = 'none';
    oLink.innerHTML = 'Show Empty Fields'
    }
    }
    }
    }
    }
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      What's the default style setting for the rows?

        Comment

        • Don Draper
          New Member
          • Mar 2007
          • 2
          #3
          Not sure what you mean by default setting for the rows. I can tell you that the rows in the table I want to hide are given the following attribute:

          name='hiderow'

          These are rows that represent empty fields from my data source so I am giving the user an option to hide these empty rows.

          Most examples providing an alternative to IE's document.all suggest using getElementById( ) but this only works for single object in the DOM. Since I want to find multiple rows, I used the name attribute instead where I can have multiple objects with the same name. So I needed to use getElementsByTa gName() (notice the plurality of elements in the name) to get a collection of all the rows with this attribute.

          After researching the getElementsByTa gName(), I was able to construct an alternate function that appears to work in both IE 6 and FF 2.x and is shown below. It appears that assigning an single a single object in the collection to a new variable does not work in FF although this appears like a standard OO contruct. Or maybe I just missed something simple.

          var oRow = oRows(iImg);

          Here it function that works in both IE 6 and FF 2.x:

          function hideEmptyFields _ff()
          {
          var oLink = document.getEle mentById('hidel ink')
          //var oImages = document.getEle mentsByTagName( 'TR');
          var oRows = document.all || document.getEle mentsByTagName( 'TR');

          for (var i = 0; i < oRows.length; i++)
          {
          n = oRows[i].getAttribute(" name");
          if (n == 'emptyrow')
          {
          if (oRows[i].style.display == 'none')
          {
          oRows[i].style.display = '';
          oLink.innerHTML = 'Hide Empty Fields'
          }
          else
          {
          oRows[i].style.display = 'none';
          oLink.innerHTML = 'Show Empty Fields'

          }
          }
          }
          }

          Does anyone see a problem with this code?

          I did see an example where the table is and ID and getElementById( ) is used to first get a reference to the table and then the table reference is used to get all ('TR') tags. I guess this might improve speed since the initial collection is limited to the table to locate the rows. Perhaps I will try this and post again if the difference it worth noting. TIA.


          Finally, an interesting observation is that I can call this function from the <Body> tag's onload event so that the "named" rows are actually hidden before the page first displays. IE 6 instantly displays the page with the rows already hidden while FF displays the page with rows as visible and then after a fraction of second, the rows are hidden which is not desirable. FF apparently displays the page and then runs the function to hide the rows after the fact. I am trying to like FF but in this case, IE 6 appears to handle this in a superior way. Is there a way to have FF not display the page until the rows are hidden?

            Comment

            • iam_clint
              Recognized Expert Top Contributor
              • Jul 2006
              • 1207
              #4
              var oRows = document.getEle mentsByTagName( 'TR');

                Comment

                Previous template Next
                Working...