设计一个JSP页面Table.jsp,其功能为显示一个11行3列的表格
时间: 2024-10-01 21:13:05 浏览: 57
设计一个简单的JSP页面(如Table.jsp)用于显示一个11行3列的表格,可以按照HTML表格结构编写,并利用JSP的内建标签`<c:forEach>`遍历数据来动态生成每一行和列。以下是页面的基本结构:
```jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>11x3表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<%-- 标题行 --%>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 使用c:forEach遍历 -->
<c:forEach items="${rows}" var="row" begin="0" end="10">
<tr>
<%-- 动态生成每一行 --%>
<c:forEach items="${row}" var="cell" begin="0" end="2">
<td>${cell}</td>
</c:forEach>
</tr>
</c:forEach>
</table>
<!-- 这里假设rows是一个包含11行数据的对象数组 -->
<script type="text/javascript">
// 如果需要,还可以通过JavaScript动态填充数据
var data = [
["数据1", "数据2", "数据3"],
... /* 重复9次 */,
["数据33", "数据34", "数据35"]
];
var table = document.getElementsByTagName("table")[0];
for (var i = 1; i <= data.length; i++) {
for (var j = 0; j < data[i - 1].length; j++) {
var row = table.insertRow(i);
var cell = row.insertCell(j);
cell.innerHTML = data[i - 1][j];
}
}
</script>
</body>
</html>
```
在这个例子中,`rows`变量通常会被Java后端控制器(例如Servlet或Spring MVC)填充数据。然后,JSP页面会根据这些数据动态生成表格。
阅读全文