Append Multiple Data Into Table

user_8861535 0
Viewed 51

I'm trying to append multiple data (from date form) into table, using Jquery and MomentJS. But the result not showing what I want.

Here's my code :

$(".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>

My code append "date" inside one "<tr><td></td></tr>" and not adding other "<tr></tr>". What I expect is to show data like this :

Expected

momentjs html jquery
1 Answers

You should iterate on the date array and add each date to a 'tr' tag

$(".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>

user_64237410
Related