JavaScript Beiladen Funktion + IE = Probleme

Question

Ich arbeite an einem Schulprojekt, das Studenten die Möglichkeit geben sollten Institute und zusätzliche Informationen über sie zu suchen.

Nach der Suche werden die Ergebnisse wie folgt dargestellt:. Kann Bild nicht zeigen, haben eine rep von 10 zu bekommen, wie ich später das tun würde

Das funktioniert, verwende ich diese Funktion onLoad:

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

aber wenn ich IE7 ich nur zuerst einige Institute erhalten (in der Regel 19)
Dann habe ich Druck auf einer der Pluszeichen, die diese Funktion halten:

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;

}

Schräge genug, um alle 19 Ergebnisse jetzt bekommen angezeigt

Also meine Frage ist:

Does IE7 meine Beiladen Code nicht mehr (vielleicht, weil es zu Griff zu viel ist), oder muss ich für Fehler in meinem Programm suchen?
Bei anderen Browsern funktioniert dieses Programm perfekt ..

Dies ist der Code tatsächlich HTML, JSTL und JavaScript-Code (Ich weiß, es ist chaotisch, aber es ist eine Übung auf JSTL so brauche ich es zu benutzen):

<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

nur aus Gründen und um Hilfe natürlich! ;)

DEMO: http://jsbin.com/ewajo3

Ihr Code sollte nur ein Beispiel sein:

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

„funktioniert perfekt“ ist ein weiter Begriff, und in Ihrem Fall falsch.

Nehmen Sie altes Auto zum Beispiel .. 50 Jahre altes Auto, das nach wie vor (10 MPH) fahren und Sie nehmen immer noch an das Ziel .... so kann man sagen „das Auto funktioniert perfekt“. Aber es ist langsam und es viel brechen.

Der Code ist das gleiche. Es ist nicht effizient und kann stark mit geringen Aufwand verbessert werden.

Wie auch immer, Ihre Core-Logik ist ebenso falsch, wie IE einfach nicht "Zusammenbruch" unterstützen, finden Sie hier: http://www.w3schools.com/css/pr_class_visibility.asp

Ich werde den entsprechenden Teil kopieren:

Hinweis: Keine Versionen von Internet Explorer (Einschließlich IE8) unterstützen die Eigenschaft Werte "erben" oder "Zusammenbruch".

Unter Streichen Sie sich besser an das Zeichenbrett zurück und finden Sie andere Art und Weise das gewünschte Design zu erreichen. jQuery ist eine ausgezeichnete Wahl, Sie viele, viele Dinge zur Verfügung haben, nur eine Suche entfernt.