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?

Answer 1

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.)