Wrong value of cellIndex returned for a cell that has "display:none" style applied

Posted on 2005-05-15
Last Modified: 2012-06-21

I'm using IE 6.0 on WinXp SP2 , using JavaScript.

I iterate over the cells in a row in html table , and check
for the cellIndex of each cell .

First cell  (index:0 ) in the row has the "display:none" style .

For some reason (another cool and stupid feature ???  )
I get for this cell wrong value of cellIndex ( it's actually seems like it returns the last index in this row.  For ex. if I have 3 cells in the row , then I get the value 2 for this cell )

For the second cell in the same row I get value of "0" , and for the last I get "1" .

So it seems that if a cell has "display:none" style applied , it's cellIndex property get the value of  last index in the row.

When I remove the "display:none" style from the cell , I get the cellIndex values right . ( 0,1,2).

Though when I access the first cell ( even when it has "display:none" style)
 using the oRow.cells[0] , I get the right cell .

Mystery / Bug / (stupid) Feature ????

Question by:VoidPointer
    LVL 30

    Expert Comment

    It's a bug in IE.

    Here are the specs from MS:
    >> Retrieves the position of the object in the cells collection of a row.

    Here are the specs from W3C:
    >> The index of this cell in the row, starting from 0. This index is in document tree order and not display order.

    The 2 reference agree it should return the index in the document tree.
    MS reference does not mention that bug... but it's a bug.

    Author Comment

    Well .. yeah - it seems so .
    I just wanted to be sure whether it's really a bug .
    Since I couldn't actually find anything on the web that says it's a known bug ,
    including MSDN.

    Since the strange thing is that the cells collection returns the right cells ( if accessing it
    in the row.cells[i] manner) ,
    but the cellIndex attribute is affected by the "display:none" style .

    Thanks .

    (I just want to see some more replies on this issue - wonder if anyone else encountered this)
    LVL 30

    Accepted Solution

    I found this article:
    (written in 2003)
    > Microsoft recommends that you wait for the next Internet Explorer 6 service pack that contains this fix.
    Do you have the last version of IE?  If so, MS is not quick at fixing bugs.
    LVL 14

    Expert Comment

    Can you show your code?

    Author Comment

    GrandSchtroumpf : Thank you very much for the help .
    It seems that I just haven't searched deep enough on the web for this issue :)

    I actually don't have the latest SP for the IE , but anyway I'm not going to use the cellIndex property , since we have many clients with different IE versions .

    (I've solved my problem in other way - since my table is dynamically rendered to the client from ASP.NET code , I've just added another attribute to each cell , which holds the REAL cell index as I need it )
    LVL 30

    Expert Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Suggested Solutions

    Title # Comments Views Activity
    Problem with table displays 3 35
    How to convert code to a png file 22 76
    CSS alignment question 8 30
    Bing Maps 1 23
    Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now