funzione JavaScript onLoad + IE = problemi
https://stackoverflow.com/questions/4358397
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto lavorando su un progetto scolastico che dovrebbe dare agli studenti la possibilità di istituti e informazioni aggiuntive su di loro la ricerca.
Dopo la ricerca i risultati vengono visualizzati in questo modo:. Non può mostrare immagini, hanno per ottenere un rappresentante di 10, lo farò in seguito
Questo funziona, io uso questa funzione 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";
}
}
}
ma quando uso IE7 ho solo ottenere alcuni istituti (di solito 19)
Poi premere I su uno dei segni più che tengono questa funzione:
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;
}
Strano a sufficienza tutti i 19 risultati Get visualizzata la società
Quindi la mia domanda è:
non IE7 fermare il mio codice onLoad (forse perché è troppo da gestire) o devo cercare gli errori nel mio programma?
Su altri browser questo programma funziona perfettamente ..
Questo è il codice vero e proprio HTML, JSTL e il codice JavaScript (lo so che è disordinato, ma è un esercizio sulla JSTL quindi ho bisogno di usarlo):
<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> </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> </td>
</tr>
<%=resultaatDocentnamen%>
</table>
Soluzione
solo per amore e per l'aiuto, naturalmente! ;)
DEMO: http://jsbin.com/ewajo3
il codice dovrebbe essere solo un esempio:
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';
}
Altri suggerimenti
"funziona perfettamente" è un ampio termine, e nel tuo caso sbagliato.
Prendere auto antica, per esempio .. auto di 50 anni che ancora guidare (10 MPH) e ancora vi porterà a destinazione .... così si può dire "la macchina è perfettamente funzionante". Ma è lento e si rompe un sacco.
Il codice è lo stesso. Non è efficiente e può essere migliorata notevolmente con poco sforzo.
In ogni caso, la logica di base è sbagliato pure, come IE semplicemente non supporta "collasso", vedi qui: http://www.w3schools.com/css/pr_class_visibility.asp
Io copiare la parte rilevante:
Nota: Non ci sono versioni di Internet Explorer (Compreso IE8) supportano la proprietà valori "Eredita" o "collasso".
Linea di fondo, è meglio tornare al tavolo da disegno e trovare altro modo per ottenere il disegno che si desidera. jQuery è scelta eccellente, avete molte molte cose a vostra disposizione, basta una sola ricerca di distanza.
