0

次のコードがあります。

     <%int number=0;%>

    <c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
       <td><%=++number%></td>
      <td>
      <div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
      <script language="JavaScript" type="text/JavaScript">
            function load(){
                    var content='${row.content}';
                    document.getElementById("content").innerHTML=content;
                    document.getElementById("content").innerHTML=Utf8.decode(document.getElementById("content").innerHTML);     
            }
            window.onload=load;
    </script>
    </div>
    </td>
    </c:forEach>

問題は、番号に従って行ごとに出力するのではなく、最後のコンテンツの結果のみを表示することです。

4

2 に答える 2

2

ブラウザでページ ソースを表示すると、作成しているものは次のようになります (${row.content} はサーバー上で既に置き換えられていることに注意してください)。

<td>0<td>
<td>
  <div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
  <script language="JavaScript" type="text/JavaScript">
        function load(){
                var content='The first row content';
                document.getElementById("content").innerHTML=content;
                document.getElementById("content").innerHTML=
                    Utf8.decode(document.getElementById("content").innerHTML);     
        }
        window.onload=load;
</script>
</div>
</td>
<td>1<td>
<td>
  <div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
  <script language="JavaScript" type="text/JavaScript">
        function load(){
                var content='Some different content';
                document.getElementById("content").innerHTML=content;
                document.getElementById("content").innerHTML=
                    Utf8.decode(document.getElementById("content").innerHTML);     
        }
        window.onload=load;
</script>
</div>
</td>
<td>2<td>
<td>
  <div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
  <script language="JavaScript" type="text/JavaScript">
        function load(){
                var content='Yet some more content';
                document.getElementById("content").innerHTML=content;
                document.getElementById("content").innerHTML=
                    Utf8.decode(document.getElementById("content").innerHTML);     
        }
        window.onload=load;
</script>
</div>
</td>

のコピーがfunction load()何度もwindow.onload割り当てられます。window.onload=load;

これがブラウザに到着して解釈されると、 の最後の定義のみfunction load()が有効になります。最後に割り当てたときだけが意味window.onload=load;を持ちます（window.onloadの値を置き換え続けるため）-再定義するたびload()に前の定義が置き換えられるため、最後の var content='${row.content}';ものだけが実行されます。

さらに、<div>「コンテンツ」という同じ ID のタグが多数あることになりますが、これは許可されていません。

これらの各ブロックのコンテンツは<td><div>...</div></td>、サーバー上の JSP/JSTL 自体によって設定できます。javascript を介して innerHTML を設定する必要はありません。totalRow最初の数を提供するために設定した varStatus を使用でき<td>ます。独自のカウンターをインクリメントする必要はありません。

式言語 (EL) を使用して、各行のコンテンツ値にアクセスできます。

Inline style="blah blah blah" は最悪です。絶対に必要な場合にのみ使用してください。
代わりに、このスタイルをすべて .contentbits:
style="table-layout:fixed; width:405px; word-wrap:break-word;"を対象とする CSS に入れます。
になる

.contentbits {
    table-layout:fixed;
    width:405px;
    word-wrap:break-word;
}

ページ フラグメントは非常に単純になります。

<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
  <td>${totalRow}</td>
  <td>
    <div class="contentbits">${row.content}</div>
  </td>
</c:forEach>
于 2013-01-18T01:02:03.290 に答える
1

これは正しい方法ではありませんが、addEventListener代わりに簡単な解決策を使用できonloadます。

<%int number=0;%>

<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
   <td><%=++number%></td>
  <td>
  <div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;">
  <script language="JavaScript" type="text/JavaScript">
        window.addEventListener("load", function () {
                var element = document.getElementById("content<%=number%>");
                element.innerHTML=Utf8.decode('${row.content}');     
        }, true);
</script>
</div>
</td>
</c:forEach>

実際、コードは最後の「オンロード」のみを使用しています。これは、ページをロードするときに、load完全なロードが終了したときにのみ JavaScript コールバックが実行されるためです。したがって、ループが実行されるたびloadに、最後のコールバック参照が更新されるため、onloadがトリガーされると、最後のコールバックのみが実行されます。

しかし、あなたのコードには他のエラーもあります。idはcontentコードで何度も繰り返され、getElementById同じ id がたくさんあるため、div が役に立たなくなります。ID は作業プロパティに対して一意である必要があります。

最後に、HTML とスクリプトを内部に混在させるのは適切なパターンではありません。ロジック ファイル (javascript ファイル) を外部に配置することをお勧めします。そうすれば、読み込みが完了したときにコードを変更し、生成された HTML を読み取ることができます。特定の属性を持つすべてのアイテムを管理するために、javascript でdata属性を作成し、それを読み取ることもできます。divdata

簡単にするために、例を追加します。

<%int number=0;%>

<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
   <td><%=++number%></td>
  <td>
  <div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;" data-content="${row.content}">
</div>
</td>
</c:forEach>

スクリプト ファイル (この例では jQuery を使用しており、どのブラウザーでも動作します):

$(function() {
    $("[data-content]").each(function(item) {
        $(item).html(Utf8.decode(item.attr('data-content')));
    });
});
于 2013-01-18T00:49:39.970 に答える