如何通过Thymeleaf实现点击申请按钮时传递表格行数据至目标页面

下面提供三种可行的实现方式，根据你的数据复杂度和需求选择：

方式一：URL参数传递（适合少量关键数据） #

直接在跳转URL中拼接课程的关键参数，目标页面通过Thymeleaf接收这些参数。

修改course.html中的Apply按钮链接：

<td>
    <a th:href="@{/CourseRegistration-NotesForOnlineApplication/individual/individualapplication(
        classStatus=${class.classStatus},
        courseCode=${class.courseId.courseCode},
        classNo=${class.classNo},
        courseTitle=${class.courseId.courseTitleEng},
        classDate=${class.classDate}
    )}" class="spinner-trigger-button">Apply</a>
</td>

在applycourse.html中接收参数：

<!-- 示例：显示接收的课程数据 -->
<div>
    <p>课程状态：<span th:text="${param.classStatus}"></span></p>
    <p>课程代码：<span th:text="${param.courseCode}"></span></p>
    <p>班级编号：<span th:text="${param.classNo}"></span></p>
    <p>课程名称：<span th:text="${param.courseTitle}"></span></p>
    <p>课程日期：<span th:text="${param.classDate}"></span></p>
</div>

方式二：表单POST传递（适合多字段/复杂数据） #

用表单包裹每行数据，点击Apply提交表单，将数据POST到目标页面。

修改course.html的表格行：

<tr th:each="class : ${inclass}">
    <td th:text="${class.classStatus}"></td>
    <td th:text="${class.courseId.courseCode}"></td>
    <td th:text="${class.classNo}"></td>
    <td th:text="${class.courseId.courseTitleEng}"></td>
    <td th:text="${class.classDate}"></td>
    <td>
        <form th:action="@{/CourseRegistration-NotesForOnlineApplication/individual/individualapplication}" method="post">
            <!-- 隐藏字段存储课程数据 -->
            <input type="hidden" th:value="${class.classStatus}" name="classStatus">
            <input type="hidden" th:value="${class.courseId.courseCode}" name="courseCode">
            <input type="hidden" th:value="${class.classNo}" name="classNo">
            <input type="hidden" th:value="${class.courseId.courseTitleEng}" name="courseTitle">
            <input type="hidden" th:value="${class.classDate}" name="classDate">
            <button type="submit" class="spinner-trigger-button">Apply</button>
        </form>
    </td>
</tr>

在applycourse.html中接收（需后端配合将请求参数放入Model）：

<div>
    <p>课程状态：<span th:text="${classStatus}"></span></p>
    <p>课程代码：<span th:text="${courseCode}"></span></p>
    <!-- 其他字段同理 -->
</div>

方式三：SessionStorage存储（适合前端跳转传递复杂对象） #

通过JavaScript将当前行的课程数据存入SessionStorage，跳转后在目标页面读取。

修改course.html的Apply按钮，添加点击事件：

<td>
    <a href="../CourseRegistration-NotesForOnlineApplication/individual/individualapplication" 
       class="spinner-trigger-button"
       th:onclick="saveCourseData([[${class}]])">Apply</a>
</td>

添加对应的JavaScript：

function saveCourseData(course) {
    // 将对象转为JSON字符串存入SessionStorage
    sessionStorage.setItem('selectedCourse', JSON.stringify(course));
}

在applycourse.html中读取数据：

<script>
window.onload = function() {
    const course = JSON.parse(sessionStorage.getItem('selectedCourse'));
    if(course) {
        // 将数据渲染到页面
        document.getElementById('classStatus').textContent = course.classStatus;
        document.getElementById('courseCode').textContent = course.courseId.courseCode;
        // 其他字段同理
        // 用完后可移除存储
        sessionStorage.removeItem('selectedCourse');
    }
}
</script>

<div>
    <p>课程状态：<span id="classStatus"></span></p>
    <p>课程代码：<span id="courseCode"></span></p>
    <!-- 其他字段 -->
</div>

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