顯示陣列與jQuery

我有HTML標記是這樣的：顯示陣列與jQuery

<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>

其中如果有數據會看起來像：

而且我有jQuery代碼：

$.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]); 
       }

如果查詢返回行，我的表將如下所示：

但如果它有多個行，它不會顯示正確：

如果我沒有在我的jQuery的div的使用，所有的數據將顯示連接在一起。

如何在第一張圖片中正確顯示div中的多行？

更新：

<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不起作用。

來源

2015-11-07 meph

什麼是你的問題？如果你輸入一個明確的問題，你可能會得到更清晰的答案。 – Tiesselune

您好@Tiesselune。我最後問了我的問題。 thx爲你提。 – meph

你有沒有爲'div'定義的CSS？ –

你可以做這樣的事情：

$.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對應一行。但是在你的代碼中，你只有一行，並且你將所有記錄添加到它中。

來源

2015-11-07 10:38:34

謝謝，但這並沒有爲我工作，裝飾不是什麼時，我把簡單的數據放在HTML我放在上面。再加上我使用.keyup和追加將返回每個鍵的數據。 – meph

裝飾不是可能的，因爲這段代碼不會添加css類的「單元格」，這在您發佈的JavaScript代碼中也不存在。你可以參考另一個答案，其中包括增加的CSS類。 –

我有.row和。細胞在我的CSS。我如何使用它們？！ – meph

你以非常奇怪的方式問你的問題，但對你有好處，我仍然有你的問題。

<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>

現在你的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); 
});

來源

2015-11-07 10:50:41 Cybersupernova

顯示陣列與jQuery

回答

相關問題