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;

当 this 到达浏览器并被解释时，只有最后一个定义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" 很烂。只有在绝对必要时才使用它。
相反，将所有这些样式放在 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>
于 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>

实际上，您的代码仅使用最后一个“onload”，因为在加载页面时，load只有在完成完全加载后才会执行 javascript 回调。因此，每次执行循环时，它都会更新load最后一个的回调引用，因此当onload被触发时，只会执行最后一个。

但是您的代码也有其他错误。id 在代码中content重复很多次，这将使您的 divgetElementById无用，因为您有很多相同的 id。ID 必须对工作属性是唯一的。

最后，将您的 HTML 与内部脚本混合并不是一个好的模式，最好将您的逻辑文件（javascript 文件）放在外部，然后它可以在完成加载时更改您的代码，读取生成的 html。您还可以data在您的然后通过 javascript 读取它来创建属性div以管理具有特定data属性的所有项目。

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

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