Dynamically generate table using Jquery

Question

I use JQuery version 1.8.4 and jquery-ui-1.9.2

I have this array:

window.mapData.Layers = [{id:1,Title:water}{id:2,Title:land}{id:4,Title:data}{id:1,Title:info}]

I try to create table with some text and two buttons.

Each row in table have to display title the property of object from Layers array and two buttons edit and delete.Each button have to sent as parameter the id of the property to handler when it clicked.

Here is the code:

(function () {
    var content = $('<table>')
    $(window.mapData.Layers).each(function (i, j) {
        content += '<tr><td>' + j.Title + '</td><td>' + $('<button/>')
    .text('Edit').onClick('eventHandler').params('j.id') +'</td>'+'<td>'+$('<button/>').text('Delete').onClick('eventHandler').params('j.id')+'</td>'+'</td></tr>'})

        $('#vectorLayerslist').append(content);
    }())

Here is result that I get:

water   [object Object] [object Object]
land    [object Object] [object Object]
data    [object Object] [object Object]
info    [object Object] [object Object]

But it's not works.As you can see above it's generate only text but not buttons. Any idea why buttons not generated? If there is any more elegant way to achieve my task?

Mikey · Accepted Answer · 2017-07-05 22:44:23Z

1

Build the table as string, then append the string once.

Make use of jQuery's event propagation for dynamically created elements.

var Layers = [{id:1,Title:'water'},{id:2,Title:'land'},{id:4,Title:'data'},{id:5,Title:'info'}];

var vectorLayersList = $('#vectorLayerslist');

// build the table
var content = '<table>';
    content += '<thead><tr>';
    content += '<th>Title</th>';
    content += '<th colspan="2">Actions</th>';
    content += '</tr></thead><tbody>';
$.each(Layers, function () {
    // we'll store the ID in HTML5 data-attribute for later
    content += '<tr data-id="' + this.id + '">'; 
    content += '<td>' + this.Title + '</td>';
    // give classes to your buttons for later
    content += '<td><button type="button" class="edit">Edit</button></td>'; 
    content += '<td><button type="button" class="delete">Delete</button></td>';
    content += '</tr>';
});
content += '</tbody></table>';

// append the table once
vectorLayersList.append(content);

// attach event handlers
vectorLayersList.on('click', '.edit', function () {
    var id = $(this).closest('tr').data('id');
    console.log('editing ' + id);
});

vectorLayersList.on('click', '.delete', function () {
    var id = $(this).closest('tr').data('id');
    console.log('deleting ' + id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="vectorLayerslist"></div>

edited Jul 5, 2017 at 22:44

answered Jul 5, 2017 at 18:49

Mikey

6,7564 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Over a year ago

Thanks for post.How can I add thead to the table?

Mikey Over a year ago

@Michael Simply add it to your string. Though if you use <thead/>, then you'll also need a <tbody/>. Check edit.

Collectives™ on Stack Overflow

Dynamically generate table using Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related