如何解决根据逗号将表格单元格动态拆分为多列
我有以下 HTML 表格显示数据库中的数据。
单元格数据使用 btn btn-info
Bootstrap Button 元素突出显示 Location Visited
列。
当前表:
<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,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。
所需的输出。
解决方法
这是片段
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>
您可以使用
将字符串拆分为一个数组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);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。