JavaScript onLoad function + IE = problems

Question

I'm working on a school project which should give students the ability to search institutes and extra information about them.

After the search the results are displayed like this: can't show image, have to get a rep of 10, I'll do this later.

This works, I use this onLoad function:

function onLoad() {  
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {  
        if(document.getElementsByTagName("tr")[i].id.length != 0) {  
            document.getElementsByTagName("tr")[i].style.visibility = "collapse";  
        }  
    }  
}

but when I use IE7 I first only get a few institutes (normally 19)
Then I press on one of the plus signs which hold this function:

function uitvouwen(trId,imgId) {
var url = document.getElementById(imgId).src;
if (url.indexOf("Images/plus.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "visible";
        }
    }
    url = "Images/minus.gif";
} else if(url.indexOf("Images/plusbottom.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "visible";
        }
    }
    url = "Images/minusbottom.gif";
} else if (url.indexOf("Images/minus.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "collapse";
        }
    }
    url = "Images/plus.gif";
} else if(url.indexOf("Images/minusbottom.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "collapse";
        }
    }
    url = "Images/plusbottom.gif";
}
document.getElementById(imgId).src = url;

}

Weird enough all 19 results get displayed now

So my question is:

Does IE7 stop my onLoad code (maybe because it's too much to handle) or do I have to look for errors in my program?
On other browsers this program works perfectly..

This is the code actual HTML, JSTL and JavaScript code (I know it's messy but it's an exercise on JSTL so i need to use it):

<c:forEach var="instituut" items="${ requestScope.instituten}">
<table id="LijstResultaten<%= i %>" summary="LijstResultaten<%= i %>">
    <%
        i++;
        if (instituten.size() != i) {
    %>
    <c:set var="urlLijn" scope="session" value="Images/line.gif"/>
    <c:set var="urlMin" scope="session" value="Images/minus.gif"/>
    <c:set var="urlPlus" scope="session" value="Images/plus.gif"/>
    <c:set var="urlLijnLong" scope="session" value="Images/linelong.gif"/>
    <% } else {
    %>
    <c:set var="urlLijn" scope="session" value="Images/empty.gif"/>
    <c:set var="urlMin" scope="session" value="Images/minusbottom.gif"/>
    <c:set var="urlPlus" scope="session" value="Images/plusbottom.gif"/>
    <c:set var="urlLijnLong" scope="session" value="Images/empty.gif"/>
    <% }
    %>
    <tr>
        <td><img alt="" id="instituut<%= i %>" name="instituut<%= i %>" src="${ urlPlus}" onclick="uitvouwen('MeerInfoInstituut<%= i %>','instituut<%= i %>')" onmouseover="cursorVeranderen()" style="cursor: pointer;"/></td>
        <td colspan="4">${instituut.name}</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${ urlLijn}" onclick="init();"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Land:</td>
        <td><%= landen.get(i - 1).getName() %></td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${ urlLijn}"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Stad:</td>
        <td>${ instituut.city }</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${ urlLijn}"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Postcode:</td>
        <td>${ instituut.zipcode }</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijn }"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Straat:</td>
        <td>${instituut.street}</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijn }"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Website:</td>
        <td>
            <c:choose>
                <c:when test="${  instituut.website == 'Onbekend' }">
                    ${ instituut.website }
                </c:when>
                <c:otherwise>
                    <a href="http://${ instituut.website }" >${ instituut.website }</a>
                </c:otherwise>
            </c:choose>
        </td>
    </tr>
    <%
        ArrayList<ArrayList<Outgoing_student>> studentlijst = (ArrayList<ArrayList<Outgoing_student>>) request.getAttribute("studentlijst");
        ArrayList<ArrayList<Outgoing_teacher>> docentlijst = (ArrayList<ArrayList<Outgoing_teacher>>) request.getAttribute("docentlijst");

        int aantalStudenten = studentlijst.get(i - 1).size();
        int aantalDocenten = docentlijst.get(i - 1).size();

        String resultaatStudentnamen = "";
        String resultaatDocentnamen = "";

        int j = 0;
        for (Outgoing_student studentNamen : studentlijst.get(i - 1)) {
            resultaatStudentnamen += "<tr id=\"MeerInfoStudenten" + i + "\">\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"" + (instituten.size() != i ? "Images/line.gif" : "Images/empty.gif") + "\"/></td>\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"Images/line.gif\"/></td>\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"join\" src=\"" + (studentlijst.get(i - 1).size() != (j + 1) ? "Images/join.gif" : "Images/joinbottom.gif") + "\"/></td>\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td>" + studentNamen.getFirstname() + " " + studentNamen.getLastname() + "</td>\n";
            resultaatStudentnamen += "\t\t\t\t\t</tr>\n";
            j++;
        }
        j = 0;
        for (Outgoing_teacher docentNamen : docentlijst.get(i - 1)) {
            resultaatDocentnamen += "<tr id=\"MeerInfoDocenten" + i + "\">\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"" + (instituten.size() != i ? "Images/line.gif" : "Images/empty.gif") + "\"/></td>\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"Images/empty.gif\"/></td>\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"join\" src=\"" + (docentlijst.get(i - 1).size() != (j + 1) ? "Images/join.gif" : "Images/joinbottom.gif") + "\"/></td>\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td>" + docentNamen.getFirstname() + " " + docentNamen.getLastname() + "</td>\n";
            resultaatDocentnamen += "\t\t\t\t\t</tr>\n";
            j++;
        }
    %>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijnLong }"/></td>
        <td><img alt="" id="studenten<%= i %>" name="MeerInfoStudenten" src="Images/plus.gif" onclick="uitvouwen('MeerInfoStudenten<%= i %>', 'studenten<%= i %>')" style="cursor: pointer;"/></td>
        <td colspan="2">Reeds bezocht door <span><%=aantalStudenten%></span> student(en)</td>
        <td>&nbsp;</td>
    </tr>
    <%=resultaatStudentnamen%>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijnLong }"/></td>
        <td><img alt="" id="docenten<%= i %>" name="MeerInfoDocenten" src="Images/plusbottom.gif" onclick="uitvouwen('MeerInfoDocenten<%= i %>','docenten<%= i %>')" style="cursor: pointer;"/></td>
        <td colspan="2">Reeds bezocht door <span><%=aantalDocenten%></span> docent(en)</td>
        <td>&nbsp;</td>
    </tr>
    <%=resultaatDocentnamen%>
</table>

Answer 1

just for sake and for help of course! ;)

DEMO: http://jsbin.com/ewajo3

your code should be just an example :

HTML

<tr id='caption_<%= i %>' class='tr_caption'>    
  <td>Lorem Ipsum Est <%= i %></td>    
  <td>         
    <a id='show_<%= i %>' href='javascript:;' onclick='show(this.id);'>+</a>
    <a id='hide_<%= i %>' href='javascript:;' onclick='hide(this.id);'>-</a>
  </td>
</tr>
<tr id='content_<%= i %>' class='tr_content'>
  <td colspan=2>The Brown Fox Jump Hover The Lazy Dog</td>
</tr>

CSS

.tr_content { display:none }

JAVASCRIPT

function show(elm) {
   var id = 'content_' + elm.split('_')[1];
   document.getElementById(id).style.display='block';
}
function hide(elm) {
   var id = 'content_' + elm.split('_')[1];
   document.getElementById(id).style.display='none';
}

Answer 2

"Works perfectly" is a wide term, and in your case wrong.

Take ancient car for example.. 50 years old car that still drive (10 MPH) and still take you to the destination.... so you can say "the car is working perfectly". But it's slow and it break a lot.

Your code is the same. It's not efficient and can be improved greatly with little effort.

Anyway, your core logic is wrong as well, as IE simply does not support "collapse", see here: http://www.w3schools.com/css/pr_class_visibility.asp

I will copy the relevant part:

Note: No versions of Internet Explorer (including IE8) support the property values "inherit" or "collapse".

Bottom line, you better get back to the drawing board and find other way to achieve the design you want. jQuery is excellent choice, you have many many things available to you, just one search away.