データベースからhtmlページへの画像の整列

Question

現在、htmlページに結果を追加できるコードがあります。

これは追記コードです。

function casefeed(response) { 
    var arr = JSON.parse(response); 
    var i; 

    for(i = 0; i < arr.length; i++) { 

    $("#viewcase").append("<td><img src='" + serverURL() 
      + "/images/"+ arr[i].Case_Pic + "' height='100'>" 
      + "<td>" + arr[i].CaseTime + "</a></b></td>"); 

    } 

    } 

これは私のテーブルフォーマットです。

<table class="tile-table"> 
    <tbody id = "viewcase"> 
    <tr> 
    <td> 
     <div class="tile" style="background-position: -0px -0px;"></div> 
    </td> 
    <td> 
     <div class="tile" style="background-position: px -0px;"></div> 
    </td> 
    <td> 
     <div class="tile" style="background-position: -200px -0px;"></div> 
    </td> 
    <td> 
     <div class="tile" style="background-position: -300px -0px;"></div> 
    </td> 
    </tr> 

    </tbody> 
</table> 

私の現在の結果は次のとおりです。

画像をこの形式で表示することはできますか？

Answer 1

あなたはnth-を追加することによって、これを達成することができます子（n）。 1から9までの数として配列を考えると、あなたはIMAGEURL

$(function() { 
 
    function casefeed() { 
 
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 
    var i; 
 

 
    var imageurl = "http://feelgrafix.com/data/images/images-1.jpg"; 
 
    for (i = 0; i < arr.length; i++) { 
 
     if (i % 3 == 0) { 
 
     $("#viewcase").append("<tr></tr>"); 
 
     } 
 

 
     $("#viewcase:nth-child(n)").append("<td><img src='" + imageurl + "' >Time</td>"); 
 

 
    } 
 

 
    } 
 
    casefeed(); 
 
});

img { 
 
    width: 200px; 
 
    height: 150px; 
 
} 
 
td { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tile-table"> 
 
    <tbody id="viewcase"> 
 
    </tbody> 
 
</table>

の代わりにURLを渡すことができます

Answer 2

あなたはtrに追加しなければならない、tbodyにtdを追加しています。また、2つの終了タグは、タグを開かずにある - </a></b>

これは私がお勧めです：

HTML

<table class="tile-table"> 
    <tbody id = "viewcase"> 
    </tbody> 
</table> 

Javascriptを

は

function casefeed(response) { 
    var arr = JSON.parse(response); 
    var i; 

    for(i = 0; i < arr.length; i++) { 
     if (i % 3 === 0) 
     $("#viewcase").append("tr"); // add new table row each 3 elements 

     $("#viewcase tr").last().append("<td><img src='" + serverURL() 
      + "/images/"+ arr[i].Case_Pic + "' height='100'>" 
      + "<td><p>" + arr[i].CaseTime + "</p></td>"); 
    } 

    }