Harun KARATA┼× Harun KARATA┼× - 1 year ago 80
jQuery Question

Appending row to html table with javascript

When my data coming from json and i tried to append row for my datatable with this code. But it didn't work. How can i fix this ?

<table style="width:300px" >

<tbody id="location">


type: "GET",
url: 'http://jsonplaceholder.typicode.com/users',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {

var trHTML = '';
for (var i = 1; i > data.length; i++) {
trHTML += '<tr><td><span>' + data[i].name + '</span></td></tr>';

$('#location tbody').append(trHTML);


error: function (msg) {


My actual goal is adding row to footable datatable plugin but i can't fix it too.

Answer Source

There are a few issues with your code. Most are already mentioned in the commennts:

1) Your loop does not work because the condition i > data.length is never true. I suggest using jQuery.each(...) to loop over data. Or fix it to i < data.length but then you also have to start with var i = 0.

2) $('#location tbody') does not exist in your html. That would be a tbody element inside an element with the id location. You want $('tbody#location') or just $('#location') as you should not have multiple items with the same id in your html anyway.

3) Your html inside thead is not correct. It will work this way, but it is not clean html.

Hope this list helps. It basically summarises the comments. (Thanks to all you guys here!)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download