JavaScript日期显示问题：表格首行展示今日、后续行展示每月首日

我是前端领域新手，在做表格日期展示功能时遇到问题。需求为：表格首行显示今日日期，后续每行依次展示接下来每个月的第一天。现有实现代码如下，请协助解决：

function load_assessment() {

  let formatter = new Intl.NumberFormat('en-US');
  var tf_amount=parseFloat($("#tf_amount_hide").val());
  var amount_percent=parseFloat($("#amount_percent").val());
  var mf_amount=parseFloat($("#mf_amount").val())
  var cal_tf_amount = tf_amount - amount_percent;

  $("#tf_amount").val(cal_tf_amount);
  $("#mf_amount").val(mf_amount);
  var tot_assessed = cal_tf_amount + mf_amount;
  $("#tot_assessed").val(tot_assessed);

  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = today.getFullYear();
  today = mm + '/' + dd + '/' + yyyy;

  var no_pay=parseFloat($("#no_pay").val());
  var quo_total = tot_assessed / no_pay;

  if(no_pay > 0) {

     for($i = 1; $i <= no_pay; $i++) {

       if ($i == 1) {
       $('#payment_plan_tab').append('\
         <tr>\
         <td>PAYMENT '+$i+' (D/P)</td>\
         <td>'+today+'</td>\
         <td>'+quo_total+'</td>\
         </tr>');
       } else {
         $('#payment_plan_tab').append('\
           <tr>\
           <td>PAYMENT '+$i+'</td>\
           <td>'+nextMonth+'</td>\
           <td>'+quo_total+'</td>\
           </tr>');
       }
     }
  }
}

问题分析 #

原代码里nextMonth变量未定义，且没有实现“后续每行展示接下来每个月第一天”的逻辑，导致非首行日期无法正确渲染。

修改方案 #

1. 保留原始Date对象，不直接转成字符串，方便后续月份计算
2. 封装日期格式化函数，统一处理日期格式
3. 在循环中根据当前次数计算对应月份的第一天

修改后的代码：

function load_assessment() {
  let formatter = new Intl.NumberFormat('en-US');
  var tf_amount = parseFloat($("#tf_amount_hide").val());
  var amount_percent = parseFloat($("#amount_percent").val());
  var mf_amount = parseFloat($("#mf_amount").val());
  var cal_tf_amount = tf_amount - amount_percent;

  $("#tf_amount").val(cal_tf_amount);
  $("#mf_amount").val(mf_amount);
  var tot_assessed = cal_tf_amount + mf_amount;
  $("#tot_assessed").val(tot_assessed);

  // 保留原始Date对象，用于后续月份计算
  const todayObj = new Date();
  // 封装日期格式化函数，统一输出mm/dd/yyyy格式
  function formatDate(date) {
    const dd = String(date.getDate()).padStart(2, '0');
    const mm = String(date.getMonth() + 1).padStart(2, '0');
    const yyyy = date.getFullYear();
    return `${mm}/${dd}/${yyyy}`;
  }
  // 格式化今日日期
  const todayStr = formatDate(todayObj);

  var no_pay = parseFloat($("#no_pay").val());
  var quo_total = tot_assessed / no_pay;

  if (no_pay > 0) {
    // 先清空表格原有内容，避免重复追加
    $('#payment_plan_tab').empty();
    for ($i = 1; $i <= no_pay; $i++) {
      let paymentDate;
      if ($i === 1) {
        paymentDate = todayStr;
      } else {
        // 计算第i行对应的月份第一天：当前月份 + (i-1)个月，日期设为1
        const targetDate = new Date(todayObj.getFullYear(), todayObj.getMonth() + ($i - 1), 1);
        paymentDate = formatDate(targetDate);
      }
      // 简化HTML拼接逻辑
      $('#payment_plan_tab').append(`
        <tr>
          <td>PAYMENT ${$i}${$i === 1 ? ' (D/P)' : ''}</td>
          <td>${paymentDate}</td>
          <td>${quo_total}</td>
        </tr>
      `);
    }
  }
}

关键说明 #

• 保留todayObj原始Date对象，方便通过getFullYear()、getMonth()进行月份计算
• formatDate函数统一处理日期格式，减少重复代码
• 计算后续月份第一天时，使用new Date(年, 月, 1)构造新日期，其中月份参数为当前月份加上循环次数减1（首行为当月，第2行为下一月，以此类推）
• 追加表格行前调用empty()清空原有内容，避免多次执行函数时重复添加行

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