Dynamically Split a table cell into multiple columns depending on the comma

I have the following HTML Table displays data from the database.
The cell data use btn btn-info Bootstrap Button element to highlight the Location Visited Column.

Current Table:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

 <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Name</th>
                      <th scope="col">Surname</th>
                      <th scope="col">Location Visited</th>
                      <th scope="col">Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td> 
                          <span class="btn btn-info">
                                R-Block, S-Block, Audit-Block
                          </span>       
                        </td>
                        <td>June, 24, 2012</td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td> 
                          <span class="btn btn-info">
                               T-Block, S-Block, Finance-Block
                          </span>       
                        </td>
                         <td>January, 14, 2012</td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                        <td>Parrel</td>
                        <td>Smith</td>
                      <td>
                          <span class="btn btn-info">
                                R-Block, H-Block,Admin-Block
                          </span>                       
                        </td>
                         <td>December, 04, 2012</td>
                    </tr>
                      
                  </tbody>
                 </table>  

I want the Cell to always split data whenever a comma is loaded in the cell.

I Have tried using Colspan but I want the CELL Data to split into multiple columns automatically whenever a comma is present. e.g: if the cell has 2 commas columns, there must be two columns/(blocks), and if the cell has 3 commas the column/(blocks) has to be 3 as well.

Desired Output.

enter image description here

26 thoughts on “Dynamically Split a table cell into multiple columns depending on the comma”

  1. It is appropriate time to make some plans for the future and
    it’s time to be happy. I’ve read this post
    and if I could I want to suggest you few interesting things or advice.
    Perhaps you could write next articles referring to this article.
    I desire to read even more things about it! http://droga5.net/

    Reply

Leave a Comment