How to append data to a table (Script to HTML)

Question

I'm using JavaScript in order to append data to my table.

As you see the above image everything works out but when i append it the the table.The table is not been show on my HTML page.

Java script

success: function (data) {
            var inquirieslist = JSON.stringify(data)
            $.each(inquirieslist, function (index, item) { //the code which comes here is at the bottom

                $('<tr>' +
                    '<td>' + item.ReservationDate + '</td>' +
                    '<td>' + item.Name1 + '</td>' +
                    '<td>' + item.Name2 + '</td>' +
                    '<td>' + item.VenueName + '</td>' +
                    '<td>' + item.PackageTypeName + '</td>' +
                    '<td>' + item.IsActive + '</td>'+
                    '</tr>').appendTo($('#grid'));

            });
            }

$.each(inquirieslist, function (index, item) {index = 0, item = {ReservationDate: "/Date(1585852200000)/", ReservationNo: "RA00006", Name1: "", Name2: "PALIHAWADANA", VenueName: "Windsor", …}

This is my HTML that im using.

<div class="row grid">
    <div class="col-md-12">
        <div class="card m-b-30">
            <div class="card-header">
                <h5 class="card-title">Reservations</h5>
            </div>
            <div class="card-body">
                <div class="table table-responsive">
                    <table class="table table-striped" id="grid" style="display:none;">
                        <tr>
                            <th>Reservation Date</th>
                            <th>Name1</th>
                            <th>Name2</th>
                            <th>Venue</th>
                            <th>Package</th>
                            <th>Status</th>
                            <th width="90px"><span data-toggle="tooltip" title="Active / Inactive">Completed</span></th>

                        </tr>
                        <tr class="no-record">
                            <td colspan="4">No Records Found.</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

So when ever i append my table it not drawn or shown on my HTML page.Is this wrong or am i missing something. Im still a beginner.

when you are changing this style="display:none;" to visible ? — Siva Rm K, Apr 21 '20 at 06:20
@acbay I just removed it from my other pages would it work if i remove this? — Justin, Apr 21 '20 at 06:22
@SivaRmK i Have not done it yet ,would it work if i remove this? — Justin, Apr 21 '20 at 06:23

score 2 · Answer 1 · answered Apr 21 '20 at 06:24

You can refer this link use interpolation to append tr to table: $('#grid tr:last').after(...)

Also need remove display none for your table style="display:none;".

https://stackoverflow.com/a/56096496/4964569

     $.each(inquirieslist, function (index, item) { //

     $('#grid tr:last').after(`<tr><td>${item.ReservationDate}</td><td>${item.Name1}</td><td>${item.Name2}</td><td>${item.VenueName}</td><td>${item.PackageTypeName}</td><td>${item.IsActive}</td></tr>`)

   });

var inquirieslist = [{
  ReservationDate: '2020/04/21',
  Name1: 'A',
  Name2: 'A',
  VenueName: 'C',
  PackageTypeName: 'D',
  IsActive: true
},
{
ReservationDate: '2020/04/21',
  Name1: 'A',
  Name2: 'A',
  VenueName: 'C',
  PackageTypeName: 'D',
  IsActive: true
}];
            $.each(inquirieslist, function (index, item) { //
            
                $('#grid tr:last').after(`<tr><td>${item.ReservationDate}</td><td>${item.Name1}</td><td>${item.Name2}</td><td>${item.VenueName}</td><td>${item.PackageTypeName}</td><td>${item.IsActive}</td></tr>`)

            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row grid">
    <div class="col-md-12">
        <div class="card m-b-30">
            <div class="card-header">
                <h5 class="card-title">Reservations</h5>
            </div>
            <div class="card-body">
                <div class="table table-responsive">
                    <table class="table table-striped" id="grid">
                        <tr>
                            <th>Reservation Date</th>
                            <th>Name1</th>
                            <th>Name2</th>
                            <th>Venue</th>
                            <th>Package</th>
                            <th>Status</th>
                            <th width="90px"><span data-toggle="tooltip" title="Active / Inactive">Completed</span></th>

                        </tr>
                        <tr class="no-record">
                            <td colspan="4">No Records Found.</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Apr 21 '20 at 06:34

0

Please read this add-table-row-in-jquery

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');

as opposed to

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

answered Apr 21 '20 at 06:34

Benyamin

11
2

How to append data to a table (Script to HTML)

2 Answers2