时间戳

首页 > 解决方案 > 将 html 表的行转换为引导卡

javascript - 将 html 表的行转换为引导卡

问题描述

我有如下行的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")

它没有用，将每一行相互叠加

我想要这样的结果： 在此处输入图像描述

标签： javascripthtmljquerytwitter-bootstrap

解决方案

不需要为 hidethead或tfoot. 首先，您需要了解replaceWith()jQuery中的replace()方法和 JavaScript 中的方法。因此，只需将表格内容作为字符串拉出并运行简单的字符串替换。并根据需要添加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>

推荐阅读