javascript - 将图像从数据库对齐到 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-child(n) 来实现此目的。对于示例，我将数组视为从 1 到 9 的数字。您可以在 imageurl 的位置传递您的 url

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