How to make each loop work in IE7?

Question

I'm currently working on a project where I hide/show some table rows based on the contents of the table cells.

I'm using jQuery's each method to loop through the table rows, this works fine in all modern browsers except IE7.

This is my code:

$('li').click(function() {
    var listLetter = $(this).text();
    $("td").hide();
    $("tr").each(function(){ // this is where IE7 goes huh
        var cellLetter = $("td:first", this).text().substr(0,1);
        if (cellLetter == listLetter) {
            $('td', this).show();
        }
    })
});

Is there a way to make this work in IE7?

The ".each()" construct works fine in IE7. What exactly goes wrong for you? Are there JavaScript errors? — Pointy, Feb 27 '11 at 20:55
Nothing happens - no JavaScript errors, the table row doesn't show. I'm working on a site that uses the EmulateIE7 meta tag, when I comment out the tag, it all works. — timkl, Feb 27 '11 at 21:02
Working example here: http://timkjaerlange.com/foobar/stack-stuff/hide-table-row.html — timkl, Feb 27 '11 at 21:02
"works fine in all modern browsers except IE7".... I would argue that IE7 is not a modern browser. :-) — Spudley, Feb 27 '11 at 21:03
Since you're focused on only the first character of text, I'd try trimming whitespace in case IE is inserting some. `var cellLetter = $.trim( $("td:first", this).text() ).substr(0,1);` — user113716, Feb 27 '11 at 21:20
@timki - a question: do the table cells start off invisible? In other words, do they start off with a style (either from a CSS file or from an inline "style" attribute) where "display" is "none"? — Pointy, Feb 27 '11 at 21:32
@timki check my updated answer - I think I know what the problem is, though not the root cause. — Pointy, Feb 27 '11 at 22:00
@Pointy: Well I was half right, which doesn't quite qualify as right. Good call on the other trim. I'm always happy when someone else finds a solution before I get around to firing up IE! ;o) — user113716, Feb 27 '11 at 22:45

Goran · Answer 1 · 2011-02-27T22:30:33.633

2

Found the final problem. Add .substr(0,1) to your first line:

var listLetter = $(this).text().substr(0,1);

Now the comparison will return true on IE7 for all letters. Not sure what goes wrong here otherwise.

edited Feb 27 '11 at 22:30

answered Feb 27 '11 at 21:05

Goran

6,798
9
41
57

1

Going back to IE5 on PC's, I've never had to use `` to make IE happy. Maybe MacOS IE5.5 needed it ... – Pointy Feb 27 '11 at 21:37
Looking at the source it seems you're now missing the /table. Can you fix that? – Goran Feb 27 '11 at 21:46
@Pointy Browsers are non-deterministic machines :) http://www.codingforums.com/showthread.php?t=17321 – Goran Feb 27 '11 at 21:49

score 2 · Accepted Answer · edited May 23 '17 at 12:04

This is edited - I've left the original stuff below, which isn't actually the problem here but whatever.

~~Try changing:~~

        $('td', this).show();

to

        $('td', $(this)).show();

I don't know what IE's problem is, nor why it would work in IE8 and other browsers but not IE7. The jQuery people seem not to like that form anyway, preferring:

         $(this).find('td').show();

which is what the internals of jQuery will do anyway.

gee I'm dumb - ok anyway I think the key lies with the suggestion to use $.trim() on the text - except it has to be done both to the "listLetter" and the "cellLetter"!!

Original

If your table HTML/CSS is such that table cells start off invisible, then that could be the problem. I've found that (for IE6 and IE7 anyway; IE8 seems to work properly), if you give the browser a table where parts of it (in my experience, usually it had to be whole columns, maybe rows) are set to not display ("display: none") by CSS somehow (in-line style or separate CSS), then those elements of the table can never be made visible.

I asked about this problem here some time ago, and none of the suggestions made really worked. (The test HTML files are still up; I should make those into jsFiddle entries.)

I agree that your last code snippet is better form. I've updated my example, but same result: http://timkjaerlange.com/foobar/stack-stuff/hide-table-row.html — timkl, Feb 27 '11 at 22:10
@timki - yes well it turns out I must have spent some time hallucinating ... however I think I've found the real issue. You have to call `$.trim()` on the contents of the `
The $.trim did it! Thanks a lot for helping me out - this forum is so immensely cool! :) — timkl, Feb 27 '11 at 22:22
Well it was @patrick dw who suggested the "trim()" in the first place - it took an embarrassing amount of debugging for me to realize what was going on :-) — Pointy, Feb 27 '11 at 22:33

How to make each loop work in IE7?

2 Answers2

This is edited - I've left the original stuff below, which isn't actually the problem here but whatever.

Original