将多个数据附加到表中答案

【问题标题】：Append Multiple Data Into Table将多个数据附加到表中
【发布时间】：2021-11-16 06:58:45
【问题描述】：

我正在尝试使用 Jquery 和 MomentJS 将多个数据（来自日期形式）附加到表中。但结果没有显示我想要的。

这是我的代码：

$(".btnNext").on('click', function(e) {
    var Day = 1;
    var newDay = Day++;
    var fromDate = $('#campaign_start_period_id').val(),
        toDate = $('#campaign_end_period_id').val(),
        from, to, druation;


    from = moment(fromDate, 'YYYY-MM-DD');
    to = moment(toDate, 'YYYY-MM-DD');

    /* using diff */
    duration = to.diff(from, 'days')
    let date = [];
    for (var m = moment(fromDate); m.isBefore(toDate); m.add(1, 'days')) {
        date.push(m.format('MMM. DD, YYYY'));
    }

    var tr = '<tr class="v-middle">';
    tr += '<td>' + newDay + '</td>';
    tr += '<td class="text-color">' + date + '</td>';
    tr += "</tr>";
    $('#result tbody').append(tr);

});

<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" type="text" value="{{ campaign_start_period }}" />

<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_end_period" placeholder="dd M yyyy" type="text" 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>

我的代码在一个"<tr><td></td></tr>" 中附加“日期”，而不是添加其他"<tr></tr>"。我期望的是显示这样的数据：

【问题讨论】：

标签： html jquery momentjs

【解决方案1】：

您应该迭代日期数组并将每个日期添加到“tr”标签

$(".btnNext").on('click', function(e) {
    var Day = 1;
    var newDay = Day++;
    var fromDate = $('#campaign_start_period_id').val(),
        toDate = $('#campaign_end_period_id').val(),
        from, to, druation;


    from = moment(fromDate, 'YYYY-MM-DD');
    to = moment(toDate, 'YYYY-MM-DD');

    /* using diff */
    duration = to.diff(from, 'days')
    let date = [];
    for (var m = moment(fromDate); m.isBefore(toDate); m.add(1, 'days')) {
        date.push(m.format('MMM. DD, YYYY'));
    }

    var tr = '';
    date.forEach((newDay,index) => {
        tr += '<tr class="v-middle">';
    tr += '<td>' + (index + 1) + '</td>';
    tr += '<td class="text-color">' + newDay + '</td>';
    tr += "</tr>";
    });

    $('#result tbody').append(tr);

});

<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" type="text" value="{{ campaign_start_period }}" />

<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_end_period" placeholder="dd M yyyy" type="text" 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>

【讨论】：