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';
}