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()的 last 定义才会生效;只分配window.onload=load;的 last 时间意味着什么（因为你一直在替换window.onload的值） - load()的每次重新定义都将取代之前的那个 - 所以只有你的最后 var content='${row.content}';一直在执行。

此外，您将拥有许多<div>个标签，其ID与“内容”相同且不允许使用。

每个<td><div>...</div></td>块的内容可以由JSP / JSTL本身在服务器上设置 - 不需要通过javascript设置innerHTML。您可以使用您设置的totalRow varStatus来提供第一个<td>的数字 - 您不需要增加自己的计数器。

您可以使用表达式语言（EL）访问每行的内容值。

内联风格=“等等等等等”糟透了。只有在绝对必要的情况下才使用它相反，将所有这些样式放在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产生。您还可以在data中创建div属性，然后通过javascript阅读该属性，以管理具有特定data属性的所有itens。

为了简单起见，我将添加一个例子：

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

jstl迭代中的JavaScript

2 个答案: