基于Spring MVC与JavaScript在JSP中创建动态表格及提取日期月份求助

嘿，我来帮你搞定这个需求！咱们一步步来实现：用Spring MVC准备数据、在JSP里通过JavaScript渲染动态表格，同时搞定从yyyy-MM-dd格式日期中提取月份的问题。下面是具体的代码示例和说明：

首先咱们得在后端把需要展示的数据准备好，这里模拟一些包含日期的业务数据，你可以换成从数据库查询的真实数据。同时提供两种月份提取思路：后端提前处理或者交给前端JS处理。

后端代码示例（Controller） #

@Controller
public class DynamicTableController {
    @GetMapping("/show-dynamic-table")
    public ModelAndView renderDynamicTable() {
        ModelAndView mav = new ModelAndView("dynamic-table");
        
        // 模拟业务数据，替换成你的真实数据来源（比如DAO查询）
        List<Map<String, Object>> tableData = new ArrayList<>();
        tableData.add(Map.of("id", 1, "title", "项目A", "createDate", "2024-02-18"));
        tableData.add(Map.of("id", 2, "title", "项目B", "createDate", "2024-06-25"));
        tableData.add(Map.of("id", 3, "title", "项目C", "createDate", "2024-09-05"));
        
        // 【可选】后端提前提取月份（适合不需要前端动态修改日期的场景）
        DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
        for (Map<String, Object> item : tableData) {
            String dateStr = (String) item.get("createDate");
            LocalDate date = LocalDate.parse(dateStr, dateFormatter);
            // 提取数字月份，比如2、6、9，要中文月份可以用date.getMonth().getDisplayName(TextStyle.FULL, Locale.CHINESE)
            item.put("month", date.getMonthValue());
        }
        
        mav.addObject("tableData", tableData);
        return mav;
    }
}

接下来在JSP页面里，咱们可以选择两种方式渲染表格：一种是用JSTL直接循环后端数据，另一种是用JavaScript动态生成表格（更适合需要前端交互的场景）。

JSP页面代码示例（dynamic-table.jsp） #

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>动态数据表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 30px auto;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        th, td {
            border: 1px solid #e0e0e0;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h3 style="text-align: center;">动态表格展示</h3>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>项目名称</th>
                <th>创建日期</th>
                <th>月份</th>
            </tr>
        </thead>
        <tbody>
            <!-- 方式1：用JSTL直接渲染后端数据（简单高效） -->
            <c:forEach items="${tableData}" var="item">
                <tr>
                    <td>${item.id}</td>
                    <td>${item.title}</td>
                    <td>${item.createDate}</td>
                    <td>${item.month}月</td>
                </tr>
            </c:forEach>

            <!-- 方式2：用JavaScript动态渲染（适合需要前端交互的场景，比如筛选、修改） -->
            <%-- <tbody id="tableBody"></tbody> --%>
        </tbody>
    </table>

    <script>
        // 如果选择用JS动态渲染，先把后端数据转成JS对象
        const tableData = <c:out value="${tableData}" escapeXml="false" />;

        // 前端提取月份的方法（适合后端没提前处理的场景）
        function extractMonth(dateStr) {
            // 方法A：字符串拆分（兼容性最好，不用考虑Date对象的浏览器差异）
            const dateParts = dateStr.split('-');
            return parseInt(dateParts[1]); // 转成数字月份，比如"02"→2

            // 方法B：用Date对象（注意部分旧浏览器对日期格式的兼容性）
            // const date = new Date(dateStr);
            // return date.getMonth() + 1; // JS的月份是0-11，加1得到真实月份
        }

        // 动态渲染表格的逻辑（取消注释即可使用）
        // const tableBody = document.getElementById('tableBody');
        // tableData.forEach(item => {
        //     const row = document.createElement('tr');
        //     row.innerHTML = `
        //         <td>${item.id}</td>
        //         <td>${item.title}</td>
        //         <td>${item.createDate}</td>
        //         <td>${extractMonth(item.createDate)}月</td>
        //     `;
        //     tableBody.appendChild(row);
        // });
    </script>
</body>
</html>

• 后端处理：兼容性更好，不用考虑前端浏览器对Date对象的解析差异，适合数据固定、不需要前端修改的场景。
• 前端JS处理：灵活性更高，适合需要前端动态修改日期（比如用户选择日期后实时显示月份）的场景，推荐用字符串拆分的方式，比Date对象更稳定。

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