javascript - 在具有 3 列的表中显示 ajax 响应

Question

我正在尝试在一个表格中显示带有名称和描述的图像，表格中连续 3 列看起来像这样

    Image 1        Image 2        Image 3
    name(date)     name(date)     name(date)
    description    description    description
    
    Image 4        Image 5        Image 6
    name(date)     name(date)     name(date)
    description    description    description

so on so forth..

截至目前，所有图像都像这样显示在 1 行中

Image 1  name(date)  Image 2  name(date)   Image 3  name(date)  Image 4 name(date)
         description          description           description        description
 

这是我到目前为止所拥有的..

js文件

function moreFlowers() {
  $.getJSON("/products", function(products) {

  for(var i = 0; i < products.length; i++)
   if (i && (i / 1 !== 1)) {
    const months = new Array("January", "February", "March",
                  "April", "May", "June", "July", "August", "September",
                  "October", "November", "December");

    const sortedProducts = products.sort((a, b) => a.date_delivered - 
                           b.date_delivered);

    const date = new Date(sortedProducts[i].date_delivered);
    const currentDate = date.getUTCDate();
    const currentMonth = date.getUTCMonth();
    const currentYear = date.getUTCFullYear();
    const formattedDate = (months[currentMonth]  + currentDate + currentYear);

    const product = new Product(products[i].name, formattedDate, 
                     products[i].description)

     product.render()
   }
  })
}


function Product(name, date_delivered, description) {
  this.name = name
  this.description = description
  this.date_delivered = date_delivered
}


Product.prototype.render = function() {
  var images = [
   "https://i.imgur.com/14yyQ0K.jpg",
   "https://i.imgur.com/ahDvbBG.jpg",
   "https://i.imgur.com/RV80uWc.jpg",
   "https://i.imgur.com/8skqGbu.jpg",
   "https://i.imgur.com/8skqGbu.jpg",
   "https://i.imgur.com/UhG6hXs.jpg",
   "https://i.imgur.com/bB8UWhW.jpg",
  ]

   const randomNum=Math.floor(Math.random()*images.length)
   const img = document.createElement("img");
   img.src = images[randomNum];
   const src = document.getElementById("past_flowers");
   const image = src.appendChild(img);

   $("#past_flowers").append("<td>" + image + "<br>" + `${this.name}` +  
       `(${this.date_delivered})` + "<br>" + `${this.description}` + "</td>")


  $(".js-more_flowers").remove()
}

HTML 文件

<table width="100%" border="1" cellpadding="5" class="table">
    <tr id="past_flowers">
      <button class="js-more_flowers" > More past flowers </button>
    </tr>
</table>

我尝试<tbody class="some_classname">在我的 CSS 文件中使用并以这种方式附加结果，但这也不起作用。

CSS 文件

table, tr, td {
  border: 5px solid white;
}

.js-more_flowers {
  display: inline;
  width: 80%;
  font-size: 160%;
  border: 1px solid black;
  background-color: #adafb2;
  padding: 20px;
}

标签： javascriptjqueryhtml