Showing array with jQuery

Question

I have HTML markup like this:

 <div class="row"> <div class="cell" id="jobtitle"></div> <div class="cell" id="jobname"></div> <div class="cell" id="fullname"></div> <div class="cell" id="phone"></div> <div class="cell" id="mail"></div> <div class="cell" id="city"></div> <div class="cell" id="description"></div> </div>

which if had data would looks like:

And I have jQuery code:

$.ajax({ type: 'POST', url: 'query2.php', data: key, dataType: 'json', success: function (msg) { var html = ["", "", "", "", "", "", ""] , cnt = 0; $.each(msg, function () { html[0] += '<div>' + msg[cnt].jobTitle + '</div>'; html[1] += '<div>' + msg[cnt].jobName + '</div>'; html[2] += '<div>' + msg[cnt].fullName + '</div>'; html[3] += '<div>' + msg[cnt].phone + '</div>'; html[4] += '<div>' + msg[cnt].mail + '</div>'; html[5] += '<div>' + msg[cnt].city + '</div>'; html[6] += '<div>' + msg[cnt].description + '</div>'; cnt++; }); $('#jobtitle').html(html[0]); $('#jobname').html(html[1]); $('#fullname').html(html[2]); $('#phone').html(html[3]); $('#mail').html(html[4]); $('#city').html(html[5]); $('#description').html(html[6]); }

If the query returns on row, my table would be like:

But if it has multiple rows, it doesn't show right:

And if I don't use div in my jQuery, all data would show attached together.

How can I print multiple rows in correct show in div like the first picture?

Update:

<html> <body> <div class="form-style-5 read-style"> <fieldset class="field-read"> <input id="inputsearch" type="text" name="searchbox" placeholder="بخشی از متن جهت جستجو" Lang="fa-IR"> </fieldset> </div> <div class="wrapper"> <div class="table"> <div class="row header blue"> <div class="cell table-header"> کسب و کار </div> <div class="cell table-header"> عنوان شغل </div> <div class="cell table-header"> نام و نام خانوادگی </div> <div class="cell table-header"> تلفن </div> <div class="cell table-header"> آدرس ایمیل </div> <div class="cell table-header"> شهر </div> <div class="cell table-header"> توضیحات </div> </div> <div class="row"> <div class="cell" id="jobtitle"></div> <div class="cell" id="jobname"></div> <div class="cell" id="fullname"></div> <div class="cell" id="phone"></div> <div class="cell" id="mail"></div> <div class="cell" id="city"></div> <div class="cell" id="description"></div> </div> </div> </body> </html>

And the CSS I have:

.cell { padding: 6px 12px; display: table-cell; font-family: yekan; font-size: 14px; text-align: center; } .row { display: table-row; background: #f6f6f6; } .row:nth-of-type(odd) { background: #e9e9e9; } .wrapper { margin: 0 auto; padding: 10px; max-width: 100%; } .table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; }

Which like the first picture i inserted, all are centered, odd and even rows has different colors. But in the div in the jQuery loop, CSS isn't working.

What is your question? If you enter a clear question, chances are you'll get clearer answers. — Tiesselune
– Tiesselune, Commented Nov 7, 2015 at 9:58
Hi @Tiesselune. I asked my question in the end. thx for your mention. — meph
– meph, Commented Nov 7, 2015 at 10:19
Normally, table is used to show the table data. But is there any reason to use div? — Ganesh Kumar
– Ganesh Kumar, Commented Nov 7, 2015 at 10:22
From your two images at the end: this looks fine to me, so what is the problem? — Axel Amthor
– Axel Amthor, Commented Nov 7, 2015 at 10:28

Ganesh Kumar · Accepted Answer · 2015-11-07 10:38:34Z

You can do something like this:

$.each(data, function (index, value) { var row = ""; row += '<div>' + value.jobTitle + '</div>'; row += '<div>' + value.jobName + '</div>'; row += '<div>' + value.fullName + '</div>'; row += '<div>' + value.phone + '</div>'; row += '<div>' + value.mail + '</div>'; row += '<div>' + value.city + '</div>'; row += '<div>' + value.description + '</div>'; $('#table').append('<div class="row">' + row + "</div>"); });

Your HTML:

<div id="table"></div>

I think, you want to have multiple div.row. Each such div is corresponding to one row. But in your code, you are having only row and you are adding all the records into it.

Thanks but that didn't work for me and the decoration isn't what when i put simple data in HTML i placed above. plus i'm using .keyup and appending will return data for each key.
The decoration is not there possibly because this code does not add the css class 'cell', which is not there in the JavaScript code posted by you as well. You can refer another answer which includes addition of css class.
If you post the complete table template, then it is easy to understand.

Cybersupernova · Accepted Answer · 2015-11-07 10:50:41Z

You have asked your question in a very weird way but, good for you, still I got your question.

<div id="my-table"> <div class="row"> <div class="cell jobtitle"></div> <div class="cell jobname"></div> <div class="cell fullname"></div> <div class="cell phone"></div> <div class="cell mail"></div> <div class="cell city"></div> <div class="cell description"></div> </div> </div>

Now your jquery

$.ajax({ type: 'POST', url: 'query2.php', data: key, dataType: 'json', success: function (msg) { var html = ''; $.each(msg, function (i,v) { html += '<div class="row">'; html += '<div class="cell jobtitile">' + v.jobTitle + '</div>'; html += '<div class="cell jobname">' + v.jobName + '</div>'; html += '<div class="cell fullname">' + v.fullName + '</div>'; html += '<div class="cell phone">' + v.phone + '</div>'; html += '<div class="cell mail">' + v.mail + '</div>'; html += '<div class="cell city">' + v.city + '</div>'; html += '<div class="cell description">' + v.description + '</div>'; html += '</div>'; }); $('#my-table').append(html); });

Collectives™ on Stack Overflow

Showing array with jQuery

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related