JSP课程项目：如何获取表格点击行数据并在新页面展示

嘿，这个需求在大学课程Web项目里太常见啦！我给你分享几种实用的实现方式，你可以根据自己的项目情况来选：

这是最简单直接的方法，点击Book按钮时把当前行的关键信息（比如课程ID，或者直接字段值）拼在跳转URL里，新页面从请求中取出参数展示。

原页面（课程列表页）代码示例： #

<table border="1">
    <tr>
        <td>课程ID</td>
        <td>课程名称</td>
        <td>学分</td>
        <td>操作</td>
    </tr>
    <%-- 假设你从数据库查询出的课程列表存在courses集合中 --%>
    <% for(Course course : courses) { %>
    <tr>
        <td><%= course.getCourseId() %></td>
        <td><%= course.getCourseName() %></td>
        <td><%= course.getCredit() %></td>
        <td>
            <%-- 把课程ID作为参数传递到详情页 --%>
            <a href="course-detail.jsp?cid=<%= course.getCourseId() %>" class="book-btn">Book</a>
        </td>
    </tr>
    <% } %>
</table>

新页面（课程详情页course-detail.jsp）代码示例： #

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.yourpackage.Course" %>
<%@ page import="com.yourpackage.CourseService" %>
<html>
<head>
    <title>课程预订详情</title>
</head>
<body>
    <% 
        // 获取URL中的课程ID参数
        String courseId = request.getParameter("cid");
        // 通过课程ID从数据库查询完整课程信息（这里假设你有CourseService类处理业务）
        CourseService service = new CourseService();
        Course selectedCourse = service.getCourseById(courseId);
    %>

    <h2>你选择的课程信息</h2>
    <div>
        <p><strong>课程ID：</strong><%= selectedCourse.getCourseId() %></p>
        <p><strong>课程名称：</strong><%= selectedCourse.getCourseName() %></p>
        <p><strong>学分：</strong><%= selectedCourse.getCredit() %></p>
        <p><strong>课程描述：</strong><%= selectedCourse.getDescription() %></p>
        <%-- 其他字段按需添加 --%>
    </div>
</body>
</html>

注意：这种方式适合数据量小、无敏感信息的场景，因为参数会暴露在URL中。

如果你的课程信息字段较多，或者不想把数据暴露在URL里，可以用Session来存储选中的课程对象，新页面从Session中取出展示。

原页面代码示例（用表单POST提交）： #

<table border="1">
    <% for(Course course : courses) { %>
    <tr>
        <td><%= course.getCourseId() %></td>
        <td><%= course.getCourseName() %></td>
        <td><%= course.getCredit() %></td>
        <td>
            <form action="save-selected-course.jsp" method="post">
                <%-- 隐藏字段传递课程ID --%>
                <input type="hidden" name="courseId" value="<%= course.getCourseId() %>">
                <button type="submit" class="book-btn">Book</button>
            </form>
        </td>
    </tr>
    <% } %>
</table>

中间处理页（save-selected-course.jsp）： #

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.yourpackage.Course" %>
<%@ page import="com.yourpackage.CourseService" %>
<%
    // 获取表单提交的课程ID
    String courseId = request.getParameter("courseId");
    CourseService service = new CourseService();
    Course selectedCourse = service.getCourseById(courseId);
    
    // 把课程对象存入Session
    session.setAttribute("selectedCourse", selectedCourse);
    
    // 跳转到详情页面
    response.sendRedirect("course-detail.jsp");
%>

新页面（course-detail.jsp）代码示例： #

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.yourpackage.Course" %>
<html>
<head>
    <title>课程预订详情</title>
</head>
<body>
    <% 
        // 从Session中取出选中的课程对象
        Course selectedCourse = (Course) session.getAttribute("selectedCourse");
        
        if(selectedCourse != null) {
    %>
            <h2>你选择的课程信息</h2>
            <div>
                <p><strong>课程ID：</strong><%= selectedCourse.getCourseId() %></p>
                <p><strong>课程名称：</strong><%= selectedCourse.getCourseName() %></p>
                <p><strong>学分：</strong><%= selectedCourse.getCredit() %></p>
                <p><strong>课程描述：</strong><%= selectedCourse.getDescription() %></p>
            </div>
            <%-- 用完后记得移除Session中的对象，避免后续请求干扰 --%>
            <% session.removeAttribute("selectedCourse"); %>
        <% } else { %>
            <p>未选择任何课程，请返回列表页重新选择！</p>
        <% } %>
</body>
</html>

注意：Session是会话级别的，要记得在使用后及时移除存储的对象，避免内存占用或数据混乱。

如果你的项目需要前端动态处理数据（比如不想刷新页面跳转前做一些验证），可以用JavaScript获取当前行的数据，再跳转到详情页。

原页面代码示例： #

<table border="1" id="course-table">
    <tr>
        <td>课程ID</td>
        <td>课程名称</td>
        <td>学分</td>
        <td>操作</td>
    </tr>
    <% for(Course course : courses) { %>
    <tr data-course-id="<%= course.getCourseId() %>" 
        data-course-name="<%= course.getCourseName() %>"
        data-credit="<%= course.getCredit() %>">
        <td><%= course.getCourseId() %></td>
        <td><%= course.getCourseName() %></td>
        <td><%= course.getCredit() %></td>
        <td>
            <button class="book-btn">Book</button>
        </td>
    </tr>
    <% } %>
</table>

<script>
    // 给所有Book按钮绑定点击事件
    document.querySelectorAll('.book-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            // 获取当前行的DOM元素
            const row = this.closest('tr');
            // 从data属性中取出课程数据
            const courseId = row.dataset.courseId;
            const courseName = row.dataset.courseName;
            const credit = row.dataset.credit;
            
            // 对中文等特殊字符编码，避免URL乱码
            const encodedName = encodeURIComponent(courseName);
            // 跳转到详情页并传递参数
            window.location.href = `course-detail.jsp?cid=${courseId}&cname=${encodedName}&credit=${credit}`;
        });
    });
</script>

新页面（course-detail.jsp）获取参数： #

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>课程预订详情</title>
</head>
<body>
    <% 
        String courseId = request.getParameter("cid");
        // 对编码的名称解码
        String courseName = java.net.URLDecoder.decode(request.getParameter("cname"), "UTF-8");
        String credit = request.getParameter("credit");
    %>

    <h2>你选择的课程信息</h2>
    <div>
        <p><strong>课程ID：</strong><%= courseId %></p>
        <p><strong>课程名称：</strong><%= courseName %></p>
        <p><strong>学分：</strong><%= credit %></p>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Dhiraj Bezbaruah