根据逗号动态将 table 单元格拆分为多列

Question

我有以下HTML Table显示数据库中的数据。单元格数据使用 btn btn-info Bootstrap 按钮元素突出显示 Location Visited 列。

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>

我希望单元格在单元格中加载逗号时始终拆分数据。

我曾尝试使用 Colspan，但我希望 CELL 数据在出现逗号时自动拆分为多列。例如：如果单元格有 2 个逗号列，则必须有两个列/（块），如果单元格有 3 个逗号，则列/（块）也必须为 3。

Desired Output.

Answer 1

您可以使用

将字符串分割成一个数组

let newArray = string.split(",");

然后创建一个 forEach()，如：

newArray.forEach( (item) => {
 let column = document.createElement('td');
 let block = document.createElement('span');
 block.setAttribute('class', 'btn btn-info');
 block.innetHTML = item;
 column.appendChild(block);
 hereGoesTheRow.appendChild(column);
});

Answer 2

这是片段

let td = document.getElementById("container");
let string = "T-Block, S-Block, Finance-Block";
let newArray = string.split(",");

newArray.forEach(item => {
  let span = document.createElement("span");
  span.setAttribute("class", "btn btn-info me-1");
  span.innerHTML = item;
  td.appendChild(span);
});

<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 id="container"></td>
      <td>June, 24, 2012</td>
    </tr>
  </tbody>
</table>

根据逗号动态将 table 单元格拆分为多列

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

javascript

html

css

twitter-bootstrap-3

bootstrap-table