jquery dynamic table render properly

I am new to jquery, I am trying to display dynamic table with jquery.
But when I call below

jQuery.each(data, function(index, value) {
value_split = value.slice(',');
for(var i=0;i<value_split.length;i++){
$("#table").append("<tr><td>" + value_split[i] + "</td></tr>");
}
});


I am splitting because it's comma separated list. I get data like

First name
Last Name
Age
Sam
Don
23


How can I get in proper format with 3 headers and details in below row like normal table

yes I'm slicing becuase data is object e.g. Object {headers: Array[6], values: Array[6]}

data

Object {headers: Array[6], values: Array[6]}

sorry it's object not list

1 Answer
1

You probably wanted to create the row outside the inner loop, otherwise you'll get a new row for each value you append.

var data = [
"Sam, Don, 23",
"Jane, Doe, 40"
];

jQuery.each(data, function(index, value) {
var value_split = value.split(',');
var tr = $('<tr />');

for(var i=0;i<value_split.length;i++){
tr.append( $('<td />', {text : value_split[i]}) );
}

$("#table").append(tr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
</table>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.