摘要：
在 JavaServer Pages（JSP）技术中，循环输出 List 集合是常见的需求。本文将详细介绍如何在 JSP 页面中实现循环输出 List 集合，并添加行号的功能。通过分析 JSP 的基本语法和常用标签，我们将一步步构建一个功能完善的示例，帮助读者掌握这一技术。
一、
JSP 是一种动态网页技术，它允许开发者在 HTML 页面中嵌入 Java 代码。在开发过程中，经常需要将数据以表格形式展示给用户，而 List 集合是 Java 中常用的数据结构之一。本文将围绕 JSP 循环输出 List 集合并添加行号这一主题，展开详细的技术探讨。
二、JSP 基础知识
1. JSP 页面结构
JSP 页面主要由 HTML 标签、JSP 标签和 Java 代码组成。其中，HTML 标签用于展示页面内容，JSP 标签用于控制页面逻辑，Java 代码用于处理业务逻辑。
2. JSP 标签
JSP 标签分为三类：指令标签、动作标签和表达式标签。
（1）指令标签：用于配置 JSP 页面的属性，如 `<%@ page contentType="text/html;charset=UTF-8" %>`。
（2）动作标签：用于控制页面逻辑，如 `<c:forEach>`。
（3）表达式标签：用于在页面中输出表达式结果，如 `<%= ... %>`。
三、循环输出 List 集合并添加行号
1. 准备数据
我们需要创建一个 List 集合，并添加一些数据。以下是一个简单的示例：
java
List<String> dataList = new ArrayList<>();
dataList.add("数据1");
dataList.add("数据2");
dataList.add("数据3");
2. 创建 JSP 页面
接下来，我们创建一个名为 `list.jsp` 的 JSP 页面，用于展示 List 集合中的数据，并添加行号。
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>循环输出 List 集合并添加行号</title>
</head>
<body>
<%
List<String> dataList = new ArrayList<>();
dataList.add("数据1");
dataList.add("数据2");
dataList.add("数据3");
%>
<table border="1">
<tr>
<th>行号</th>
<th>数据</th>
</tr>
<%
int rowNum = 1;
for (String data : dataList) {
%>
<tr>
<td><%= rowNum %></td>
<td><%= data %></td>
</tr>
<%
rowNum++;
}
%>
</table>
</body>
</html>
3. 分析代码
（1）`<%@ page contentType="text/html;charset=UTF-8" language="java" %>`：声明页面编码和脚本语言。
（2）`<html>`、`<head>`、`<body>`：HTML 标签，用于构建页面结构。
（3）`<table>`：创建一个表格，用于展示数据。
（4）`<tr>`：创建表格行。
（5）`<th>`：创建表格头。
（6）`<td>`：创建表格单元格。
（7）`<% ... %>`：Java 代码块，用于处理业务逻辑。
（8）`int rowNum = 1;`：初始化行号变量。
（9）`for (String data : dataList) { ... }`：遍历 List 集合。
（10）`<%= rowNum %>`：输出行号。
（11）`<%= data %>`：输出数据。
（12）`rowNum++;`：行号自增。
四、总结
本文详细介绍了如何在 JSP 页面中循环输出 List 集合并添加行号。通过分析 JSP 的基本语法和常用标签，我们构建了一个功能完善的示例。希望本文能帮助读者掌握这一技术，为实际开发提供参考。
五、扩展
1. 使用 JSP 标准标签库（JSTL）简化代码
我们可以使用 JSTL 的 `<c:forEach>` 标签简化上述代码：
jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<table border="1">
<tr>
<th>行号</th>
<th>数据</th>
</tr>
<c:forEach var="data" items="${dataList}" varStatus="status">
<tr>
<td><c:out value="${status.count}"/></td>
<td><c:out value="${data}"/></td>
</tr>
</c:forEach>
</table>
2. 使用 JavaScript 动态添加行号
我们还可以使用 JavaScript 实现动态添加行号，如下所示：
jsp
<table id="data-table" border="1">
<tr>
<th>行号</th>
<th>数据</th>
</tr>
</table>
<script>
var dataList = ["数据1", "数据2", "数据3"];
var rowNum = 1;
for (var i = 0; i < dataList.length; i++) {
var row = document.createElement("tr");
var cellNum = document.createElement("td");
var cellData = document.createElement("td");
cellNum.innerHTML = rowNum;
cellData.innerHTML = dataList[i];
row.appendChild(cellNum);
row.appendChild(cellData);
document.getElementById("data-table").appendChild(row);
rowNum++;
}
</script>
通过以上扩展，我们可以根据实际需求选择合适的技术方案。
Comments NOTHING