每2项新行

Question

我正在尝试从数据库中获取数据并以html列出。

HTML：

<section class="flex-container">
    <div id="itemlist" class="productlist"></div>
</section>

JavaScript：

function _getitemlist(arr) {
    var i;
    $("#itemlist").empty();
    for (i = 0; i < arr.length; i++) {
        var t;
        t = "<div id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</div> <br>";
        $("#itemlist").append(t);
    }
}

我如何做到这一点，以便以2 x 2格式自动列出项目？ 目前看起来像这样。

Answer 1

如果不使用<td>，为什么要使用<table>？

要制作2by2，您只需将其样式设置为2by2，就应该像这样：

function _getitemlist(arr) {
 var i;

 $("#itemlist").empty();


for (i = 0; i < arr.length; i++) {
      var t;
    t = "<a href='#' id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</a><br>";
    $("#itemlist").append(t);
}


}

从循环功能中删除了<td>

.productlist{
  display: flex;
  flex-flow: row wrap;
}

.productlist a{
  display: block;
  width: 50%;
}

此样式将告知产品列表使用弹性对齐，并且他的所有items元素都不会具有一半的宽度，因此它们只会在行中出现两个 < / p>

Answer 2

尝试使用%2以上2种产品创建新行

function _getitemlist(arr) {
  var i;
  $("#itemlist").empty();
  $("#itemlist").append($('<table>').append('<tbody>'));

  for (i = 0; i < arr.length; i++) {
    var t;
    t = "<div id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</div> <br>";
    var pr = $('#itemlist').find('table').find('tbody');
    if ((i % 2) == 0) {
      pr.append($('<tr>'));
    }
    pr.find('tr:last-child').append(t);
  }
}

示例

function _getitemlist() {
  var i;
  $("#itemlist").empty();
  $("#itemlist").append($('<table>').append('<tbody>'));
  for (i = 0; i < 10; i++) {
    var t;
    t = "<td>ssss</td>";
    var pr = $('#itemlist').find('table').find('tbody');
    if ((i % 2) == 0) {
      pr.append($('<tr>'));
    }
    pr.find('tr:last-child').append(t);
  }
}
_getitemlist();

table tr td {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flex-container">
  <div id="itemlist" class="productlist">

  </div>
</section>