Question

I use the following code to hide 1-4 rows of a table when a checkbox is selected:

    for(i = 1; i < 4; i++){
      $(tbProf.rows[i]).attr('style','display:none');

      // same problem with
      // $(tbProf.rows[i]).hide();
    }

and reverse when its unticked:

    for(i = 1; i < 4; i++){
      $(tbProf.rows[i]).removeAttr('style');

      // same problem with 
      // $(tbProf.rows[i]).show();

    }

It works perfectly fine in Chrome/Firefox:

In IE7/8 however the rows only hide/show after i click somewhere(anywhere) in the form after which the style is applied! Can anyone suggest a workaround for IE8? [ i have to support IE8 🙁 ]

Answer 1

I understood the problem, but what you need to do? Show and hide these rows?
Why not use show() and hide() functions?

Edit 1:

So, try using:

$(tbProf.rows[i]).hide();

and

$(tbProf.rows[i]).show();

Edit 2:

A better example here (using the :lt selector). May be usefull for you.