1. ホーム
  2. 質問と答え
  3. JavaScript onLoad関数+ IE =問題

JavaScript onLoad関数+ IE =問題

2010-12-05 18 views
1

私は、学校のプロジェクトに取り組んでいます。これは、学生に施設や追加情報を検索する能力を与えるはずです。JavaScript onLoad関数+ IE =問題

検索結果が次のように表示されます。イメージを表示できません。10の担当者を取得する必要があります。これは後で行います。

これは動作しますが、私はこれの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"; 
     } 
    } 
}

が、私は、私は最初のわずか数機関（通常は19）
を取得IE7を使用するときに私はこれを保持するプラス記号のいずれかに押してください機能：

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;

}

奇妙では十分なすべての19回の結果は、今

を表示します

だから私の質問は次のとおりです。

IE7は、（それが処理するためにあまりにも多くのです多分ので）私のonLoadコードを停止していたり​​、私は私のプログラムのエラーを探す必要がありますか？このプログラムは完璧に動作し、他のブラウザで
...

これはコードの実際のHTML、JSTLとJavaScriptコード（私はそれが厄介だが、それは、JSTLの運動を知っているので、私はそれを使用する必要があります）です：

<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>

出典

2010-12-05 Steve Van Opstal

+0

は、コーディングとmigratetoはJQueryのこのスタイルを取り除きます。もしそうなら、アコーディオンコントロールを使いましょう。 –

+0

それはおそらくHTMLの問題かCSSの問題でしょうか？イメージの代わりに構造のコードスニペットを投稿すると、より良い結果が得られます。 @ジャニィ - あなたの応答は、OPの質問とは何の関係もありません！ –

+0

@aSeptik - ありがとう。唯一の問題は、.getElementByClassが存在しないため、javascriptで使用できないということです。それはHTMLが間違っていますが、私は選択肢がありません –

答えて

0

ちょうどのために、もちろんもちろんです。;）

DEMO：http://jsbin.com/ewajo3

あなたのコードは一例のようになります。

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

出典

2010-12-05 12:19:55

+0

あなたはそれをとても簡単に見せて、なぜこれを考えなかったのですか？非常に非常にありがとうございます。 –

0

「完璧に動作します」という言葉は広い意味で、あなたの場合は間違っています。

たとえば、古代の車を取ってまだ運転している車（10 MPH）。まだ50キロも走っていますが、まだ目的地に連れて行きます。「車は完璧に働いています。しかし、それは遅いです、そして、それはたくさん壊れます。

コードは同じです。それは効率的ではなく、少しの労力で大幅に改善することができます。 IEは、単に「崩壊」をサポートしていないよう

とにかく、あなたのコアロジックは、同様に間違っている、ここを参照してください：

注：いいえバージョンのhttp://www.w3schools.com/css/pr_class_visibility.asp

は、私は、関連する部分をコピーしますInternet Explorer （IE8を含む）は、属性「 」の値を「継承」または「崩壊」に対応しています。

ボトムラインの場合は、図面ボードに戻って他の方法で目的のデザインを達成してください。 jQueryは優れた選択肢です。多くのことが利用可能で、1回だけ検索できます。

出典

2010-12-05 11:33:26

+0

よろしくお願い致します。唯一の問題は、JQueryを学んでいないので、それを使うことができないということです（学校とそのルール）。しかし、私は持っているツールを使って別の方法を見つけ出すでしょう –

+0

@スティーブOKかなり公正です。あなたの最善の策は、style.visibilityの代わりにstyle.displayを使って作業しようとしています。非表示にして、それを元に戻すボタンがあります。 –

+0

私たちの学校では、常にこのように、私は新しいプログラミングコードを学びます。私たちは、私たちが学んだものだけを使うことができるので、何かに苦労します。そして、新しいものを学びます。このコードで、私は以前のことをeasely作ることができます。 –

関連する問題

 関連する問題