CODEWITHSUNDEEP
jqueryarrays
meph
meph

Reputation: 209

Showing array with jQuery

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:

enter image description here

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:

enter image description here

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

enter image description here

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

Answers (2)

Cybersupernova
Cybersupernova

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

Ganesh Kumar
Ganesh Kumar

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

Related Questions