Reputation: 209
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.
Upvotes: 0
Views: 81
Reputation: 1840
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);
});
Upvotes: 0
Reputation: 3250
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.
Upvotes: 1