jstl迭代中的JavaScript

Question

我有以下代碼：

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

問題在於它僅顯示最后一個內容的結果，而不是根據編號逐行打印出來。

Answer 1

如果在瀏覽器中查看頁面源，則正在創建的內容將類似於以下內容（請注意，服務器上已經替換了$ {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()的load()定義都會替換前一個-因此只有最后一個 var content='${row.content}'; 被執行。

另外，您將有許多<div>標記，它們的ID分別為“ content”，並且不允許這樣做。

每個<td><div>...</div></td>塊的內容都可以由服務器上的JSP / JSTL自身設置-無需通過javascript設置innerHTML。 您可以使用設置的totalRow varStatus來提供第一個<td> -您不需要增加自己的計數器。

您可以使用表達式語言（EL）訪問每一行的內容值。

內聯樣式=“ blah blah blah”很爛。 僅在絕對必要時使用。
而是將所有這些樣式放入CSS定位.contentbits中：
style =“ table-layout：fixed; width：405px; word-wrap：break-word;”
變成

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

Answer 2

這不是正確的方法，但是一個簡單的解決方案是使用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>

實際上，您的代碼僅使用最后一個“ onload”，因為在加載頁面時，僅當完成完全加載頁面時，它才會執行javascript load回調。 因此，每次執行循環時，都會更新最后一個的load回調引用，因此，在觸發onload時，將僅執行最后一個。

但是您的代碼也有其他錯誤。 content ID在代碼中重復很多次，這會使div getElementById失效，因為您有許多相等的ID。 ID對於工作屬性必須是唯一的。

最后，將HTML與內部腳本混合使用不是一種好方法，最好是將邏輯文件（javascript文件）置於外部，然后在完成加載后讀取生成的html，從而可以對代碼進行更改。 您還可以在div創建data屬性，然后通過javascript讀取它，以管理具有特定data屬性的所有iten。

為了簡單起見，我將添加一個示例：

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