CODEWITHSUNDEEP
javascripthtml
Justin
Justin

Reputation: 141

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

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

enter image description here

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.

Upvotes: 0

Views: 915

Answers (2)

Benyamin
Benyamin

Reputation: 11

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>');

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

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>

Upvotes: 1

Related Questions