如何用JavaScript/jQuery/Ajax向HTML表格表头插入周日期及求学习资料

嘿，我来帮你搞定这个表头日期填充的需求，顺便给你推荐些适合你当前阶段的学习资源，毕竟你正在学JavaScript/jQuery/Ajax，后端还用Java，刚好可以针对性推荐～

一、实现表头日期填充的代码示例 #

我会给你两种实现方式：原生JavaScript和jQuery，你可以根据自己的学习进度选择。

1. 原生JavaScript版本 #

这个版本不需要依赖jQuery，纯原生实现，适合打基础：

// 1. 设定起始日期（比如你指定的某周一，也可以从后端获取）
const startDate = new Date('2024-05-20'); 
// 2. 按顺序定义表头的id（对应周一到周日）
const dayHeaderIds = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

// 3. 循环填充每一天的日期
dayHeaderIds.forEach((headerId, index) => {
    // 计算当前天的日期：起始日期 + index天（index从0到6，对应周一到周日）
    const currentDay = new Date(startDate);
    currentDay.setDate(startDate.getDate() + index);
    
    // 格式化日期为YYYY-MM-DD格式，你也可以改成自己需要的格式
    const formattedDate = currentDay.toISOString().split('T')[0];
    
    // 找到对应的表头元素，设置文本内容
    document.getElementById(headerId).textContent = formattedDate;
});

2. jQuery版本 #

如果你正在重点学jQuery，这个版本更简洁：

// 1. 设定起始日期
const startDate = new Date('2024-05-20');
// 2. 表头id数组
const dayHeaderIds = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

// 3. 用jQuery的each方法循环处理
$.each(dayHeaderIds, function(index, headerId) {
    const currentDay = new Date(startDate);
    currentDay.setDate(startDate.getDate() + index);
    const formattedDate = currentDay.toISOString().split('T')[0];
    // jQuery选择器找到元素并设置文本
    $(`#${headerId}`).text(formattedDate);
});

自定义日期格式 #

如果不想用YYYY-MM-DD，比如想要MM/DD格式，可以自己写个格式化函数：

function formatDate(date) {
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1，补0成两位
    const day = String(date.getDate()).padStart(2, '0');
    return `${month}/${day}`;
}

然后把代码里的formattedDate替换成formatDate(currentDay)就行。

从Java后端动态获取起始日期 #

如果想要后端计算好起始日期（比如本周一）传给前端，这里给你个Spring Boot的示例：

后端Java代码（Spring Boot）

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.time.LocalDate;
import java.time.temporal.TemporalAdjusters;
import java.util.HashMap;
import java.util.Map;

@RestController
public class DateController {
    @GetMapping("/api/get-week-start")
    public Map<String, String> getWeekStartDate() {
        // 计算本周一的日期
        LocalDate today = LocalDate.now();
        LocalDate weekStart = today.with(TemporalAdjusters.previousOrSame(java.time.DayOfWeek.MONDAY));
        Map<String, String> response = new HashMap<>();
        response.put("startDate", weekStart.toString());
        return response;
    }
}

前端jQuery Ajax请求代码

// 用Ajax从后端获取起始日期
$.get("/api/get-week-start", function(data) {
    const startDate = new Date(data.startDate);
    const dayHeaderIds = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
    
    $.each(dayHeaderIds, function(index, headerId) {
        const currentDay = new Date(startDate);
        currentDay.setDate(startDate.getDate() + index);
        const formattedDate = currentDay.toISOString().split('T')[0];
        $(`#${headerId}`).text(formattedDate);
    });
});

二、适合你的学习资源推荐 #

结合你正在学JS/jQuery/Ajax，后端用Java的情况，推荐这些实用的资源：

• JavaScript基础：MDN的JavaScript核心指南，内容从入门到进阶，覆盖所有核心知识点，讲解细致，适合系统打基础；还有《JavaScript高级程序设计》这本书，是前端领域的经典教材，深入讲解JS的原理和高级特性。
• jQuery学习：jQuery官方的入门教程，里面有大量的示例，从选择器、DOM操作到事件处理、Ajax，一步步带你上手，非常适合新手。
• Java后端与前端交互：如果用Spring框架，Spring官方文档里的Spring MVC与Ajax交互部分，详细讲解了如何用@ResponseBody返回JSON数据，以及前端如何用jQuery发起请求；另外《Head First Servlets & JSP》这本书，能帮你理解Java Web的基础原理，搞清楚前后端交互的底层逻辑。
• 实践项目：可以找一些小项目练手，比如简单的考勤管理系统、任务跟踪系统，用Spring Boot做后端，前端用jQuery处理页面交互和Ajax请求，把学到的知识结合起来，提升实战能力。

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