使用jQuery和MomentJS向表格追加多组日期数据显示异常求助

问题修复方案 #

你现有代码的核心问题有3个：

1. HTML里结束日期的input ID和开始日期重复，导致读取结束日期失败
2. 把所有日期存入数组后直接整体插入到单个tr的td内，没有遍历日期数组为每个日期单独生成行
3. 日期序号变量定义在点击事件内部，每次点击都会重置，自增逻辑也不符合使用需求

修正后的完整代码 #

HTML部分

<script src="https://unpkg.com/moment@2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_start_period" placeholder="dd M yyyy" value="{{ campaign_start_period }}" />

<input class="form-control" type="date" id="campaign_end_period_id" maxlength="None" name="campaign_end_period" placeholder="dd M yyyy" value="{{ campaign_end_period }}" />

<button class="btnNext" value="" type="button">Next</button>

<table class="table toggle-circle table-hover table-striped" id="result">
<thead>
    <tr>
        <th>Days</th>
        <th>Date</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

JS部分

$(".btnNext").on('click', function(e) {
    // 如果需要多次点击追加不同范围的日期，删掉下面这行清空逻辑即可
    $('#result tbody').empty();

    var fromDate = $('#campaign_start_period_id').val(),
        toDate = $('#campaign_end_period_id').val(),
        from, to, duration;

    from = moment(fromDate, 'YYYY-MM-DD');
    to = moment(toDate, 'YYYY-MM-DD');
    duration = to.diff(from, 'days');
    
    // 无效日期范围直接返回，避免报错
    if(duration < 1) return;
    
    let dateList = [];
    for (var m = moment(fromDate); m.isBefore(toDate); m.add(1, 'days')) {
        dateList.push(m.format('MMM. DD, YYYY'));
    }

    // 遍历日期数组，为每个日期单独生成行
    dateList.forEach((dateItem, index) => {
        var tr = '<tr class="v-middle">';
        tr += '<td>' + (index + 1) + '</td>';
        tr += '<td class="text-color">' + dateItem + '</td>';
        tr += "</tr>";
        $('#result tbody').append(tr);
    })
});

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