JavaScript onLoad Funktion + IE = Probleme

Question

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

Nach der Suche werden die Ergebnisse wie folgt angezeigt: kann Bild nicht zeigen, muss ein rep von 10 bekommen, werde ich das später tun.

Dies funktioniert, verwende ich diese Beiladen Funktion:

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 verwende ich nur die ersten wenigen Institute erhalten (in der Regel 19)
Dann drücke ich auf einer der Pluszeichen, die diese halten Funktion:

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; 

}

Seltsam genug, um alle 19 Ergebnisse erhalten jetzt

012.351.641 angezeigt

Also meine Frage ist:

Hat IE7 mein Beiladen Code nicht mehr (vielleicht, weil es zu viel zu handhaben) oder muß ich für Fehler in meinem Programm suchen?
Auf anderen Browsern perfekt dieses Programm funktioniert ..

Dies ist der Code tatsächlich HTML, JSTL und JavaScript-Code (ich weiß, es ist chaotisch, aber es ist eine Übung auf JSTL so muss ich es 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 um sake und um Hilfe natürlich!;)

DEMO:http://jsbin.com/ewajo3

Code nur ein Beispiel sein sollte:

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 perfekt" ist ein breiter Begriff, und in Ihrem Fall falsch.

Nehmen Sie altes Auto zum Beispiel .. 50 Jahre altes Auto, das immer noch fahren (10 MPH) und immer noch zum Ziel .... so können Sie sagen, "das Auto funktioniert perfekt". Aber es ist langsam und es bricht viel.

Ihr Code ist derselbe. Es ist nicht effizient und kann mit wenig Aufwand stark verbessert werden.

Wie auch immer, Ihre Core-Logik ist falsch, wie gut, wie IE einfach nicht „Zusammenbruch“ unterstützt, siehe hier: http://www.w3schools.com/css/pr_class_visibility.asp

Ich werde den entsprechenden Teil kopieren:

Hinweis: Keine Versionen Internet Explorer (einschließlich IE8) unterstützt die Eigenschaft Werte "erben" oder "zusammenfassen".

Fazit, gehen Sie besser zurück zum Zeichenbrett und finden Sie einen anderen Weg, um das gewünschte Design zu erreichen. jQuery ist eine ausgezeichnete Wahl, Sie haben viele Dinge zur Verfügung, nur eine Suche entfernt.