преобразовать строки html таблицы в bootstrap карточки

Question

У меня есть таблица html со строками, как показано ниже:

<table id="tb" class="table table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th>title</th>
          <th>price</th>
          <th>discount</th>
          <th>image</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>PRODUCT 1</td>
          <td align="right">24.43</td>
          <td align="right">53</td>
          <td>https://images-na.ssl-images-amazon.com/images/I/81xV%2BD1OkGL._AC_SL1500_.jpg</td>
        </tr>
        <tr>
          <td>PRODUCT 2</td>
          <td align="right">50.27</td>
          <td align="right">70</td>
          <td>https://images-na.ssl-images-amazon.com/images/I/61d-BO4sARL._AC_SL1500_.jpg</td>
        </tr>
        <!-- ... many other rows -->

<!-- I added this script to put the image link inside src  -->
<script>
  $('#tb td:nth-child(4n)').each((i, el) => {
  $(el).wrapInner(`<img src="${el.innerText}" class="img-fluid"/>`);
});
</script>

Я хочу преобразовать каждую строку в карту bootstrap. Я пытался дать каждой bootstrap класс класс = "card" с использованием jquery:

$('#tb tr').addClass("card")

это не сработало, возвращает каждую строку поверх друг друга

Мне нужны такие результаты: введите описание изображения здесь

Answer 1

Довольно сложно взять код HTML и использовать javascript, чтобы преобразовать его в какой-то другой сложный формат. Если вы хотите сделать все вручную, вы можете сделать карты вручную с помощью HTML. Однако я предлагаю использовать базу данных и PHP для программного создания этих карточек или таблиц с данными в базе данных.

Вот некоторая информация о том, как создавать эти Bootstrap карточки: https://getbootstrap.com/docs/4.0/components/card/

Вот некоторая информация о том, как использовать базы данных и PHP для автоматического создания этих карточек: https://www.phpzag.com/create-bootstrap-cards-with-php-and-mysql/