图像对齐从数据库到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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您要将td追加到tbody，您应将其附加到tr。此外，还有两个没有开标记的结束标记 - </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>");
     }

   }