显示阵列使用jQuery [英] Showing array with jQuery
问题描述
我有HTML标记是这样的：
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:
![在这里输入的形象描述](\"http://i.stack.imgur.com/of4KU.jpg\")
和我有jQuery的code：
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:
![在这里输入的形象描述](\"http://i.stack.imgur.com/M5uwG.jpg\")
但是，如果它具有多行，它不显示正确的：
But if it has multiple rows, it doesn't show right:
![在这里输入的形象描述](\"http://i.stack.imgur.com/zMkwt.jpg\")
如果我没有在我的jQuery的div的使用，所有的数据将显示连接在一起。
And if I don't use div in my jQuery, all data would show attached together.
如何打印在正确的显示多行像第一张图片的div？
How can I print multiple rows in correct show in div like the first picture?
更新：
<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>
和CSS的我有：
.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;
}
哪个像第一画面我插入，全部为中心，奇数和偶数行具有不同的颜色。但在jQuery的循环DIV，CSS是行不通的。
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.
推荐答案
您可以做这样的事情：
$.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>");
});
您的HTML：
<div id="table"></div>
我想，你想有多个 div.row 。每个这样的 DIV 对应一行。但是，在你的code，你只具有行和您要添加的所有记录进去。
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.
这篇关于显示阵列使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
