将 html 表的行转换为引导卡

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>

我想将每一行转换为引导卡 我尝试使用 jquery 为每个引导类 class="card" 提供：

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

它不起作用，将每一行都返回到彼此的顶部

我想要这样的结果：

Answer 1

获取 HTML 代码并使用 javascript 将其转换为其他一些复杂的格式非常困难。如果您想手动完成所有操作，您可以使用 HTML 手动制作卡片。不过，我建议使用数据库和 PHP 以编程方式使用数据库中的数据创建这些卡片或表格。

以下是有关如何创建这些引导卡的一些信息：https://getbootstrap.com/docs/4.0/components/card/

这里有一些关于如何使用数据库和 PHP 来自动创建这些卡片的信息：https://www.phpzag.com/create-bootstrap-cards-with-php-and-mysql/

Answer 2

你想要达到的目标毫无意义。我自己也遇到了将表格转换为卡片的困境，但经过快速搜索后我才知道，这没有任何意义。 把它想象成变压器。桌子和卡片是两个不同的转换器，除非我们你蛮力，否则它们不能相互转换。

Answer 3

您可以将表格转换为卡片。我已经在 WordPress 管理表中完成了这项工作。虽然我还没有在引导程序中这样做。

这是一种直接使用 CSS 的方法。

首先删除表格页眉和页脚（如果有的话）。

thead, tfoot {
  display: none;
}

然后去掉表格的背景

table {
  background: none !important;
  border: none !important;
}

更改您的行，使其显示为卡片：

• 使它们成为内联块，这样它们将出现在同一行但作为一个完整的容器

• 添加背景、边框、内边距和阴影来设置样式

  tr {
     display: inline-block;
     padding: 1rem 0.5rem 1rem 0.5rem;
     margin: 1.5rem;
     border: 1px solid grey;
     border-radius 10px;
     box-shadow: 0 0 10px;
   }
  

使单元格出现在各自的行中

td {
  display: block;
}

如果您想为单元格数据添加标签，您可以使用 ::before 并使用特定的 CSS 属性选择器。例如，在我的 WordPress 管理表中，列名被添加到每个具有“data-colname”属性的单元格中。

td[data-colname="Guardian"]::before {
  content: "Guardian :";
}

这是我的 WordPress 表格作为卡片的示例：

（正如您可以想象的那样，您不能轻易更改 WordPress 管理表 - 您可以使用您所获得的内容）。

Answer 4

不需要为隐藏thead 或tfoot 编写单行CSS 代码。首先你需要了解 jQuery 中的 replaceWith() 方法和 JavaScript 中的 replace() 方法。因此，只需将表格内容作为字符串拉出并运行简单的字符串替换。并根据需要添加 Bootstrap classes 进行卡片设计。

有用的链接
https://stackoverflow.com/a/9230045/7052927

https://api.jquery.com/replacewith/

https://www.w3schools.com/jsref/jsref_replace.asp

$(document).ready(function () {
    $("#tb thead, #tb tfoot").remove(); //Remove element
    $("#tb").find('td').removeAttr("align"); // Remove attribute
    
    $('#tb').replaceWith($('#tb').html()
        .replace(/<tbody/gi, "<div id='tb' class='row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3' ")
        .replace(/<tr/gi, "<div class='col'> <div class='card'> <div class='card-body text-center' ")
        .replace(/<\/tr>/gi, "</div></div></div>")
        .replace(/<td/gi, "<div")
        .replace(/<\/td>/gi, "</div>")
        .replace(/<\/tbody/gi, "<\/div")
    );

    // each loop for card layout
    $("#tb .card").each(function() {
        $(this).find('.card-body div:first-child').addClass('h6 fw-bold text-primary'); // Change product style
        var imgPath = $(this).find('.card-body div:last-child');
        $(this).find('.card-body').before(`
            <div class="ratio ratio-4x3">
                <img src="`+ imgPath.text()+`" class="card-img-top1 p-2 w-auto mx-auto start-0 end-0" alt="...">
            </div>
        `);
        imgPath.remove() // After pick text then remove 
    });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container py-3">
  <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>
    </tbody>
  </table>
</div>