Problem with expanding/collaping gridview rows in Firefox

Question

I have an asp:Gridview control called gvComments that uses the following Javascript to show/hide table rows. If the expand/collapse button is clicked, a string (EventID) is passed to the function and all rows with that match the GV's bound field EventID should toggle. If I use alert on CommentRows[i].EventID in the loop it says its undefined, but CommentRows.length is correct. In Firebug it contains the value that's expected however it never passes the condition in the first if statement. I tried CommentRows[i]["EventID"] also and that didn't work.

The kicker is that it works in IE. How can I get this to work in FF?

Thank you.

*edit: This is in a MOSS 2007 custom web part

function ExpandCollapse(EventID) 
{
    var CommentRows = document.getElementById(gvComments).getElementsByTagName('TR');

    for (var i = 0; i < CommentRows.length; i++) {
        if (CommentRows[i].EventID == EventID) {
            if (CommentRows[i].style.display == 'none' || CommentRows[i].style.display == '') {
                if (navigator.appName == 'Microsoft Internet Explorer') {
                    CommentRows[i].style.display = 'block';
                }
                else {
                    CommentRows[i].style.display = 'table-row';
                }
            }
            else {
                bCollapse = true;
                CommentRows[i].style.display = 'none';
            }
        }
    }
}

Answer 1

Try using the getAttribute function:

CommentRows[i].getAttribute('EventID')

JSFiddle: http://jsfiddle.net/dRy2E/