如何制作一个 html 表，其中包含许多嵌套的手风琴元素和引导程序？
[英]How to make an html table with many nested accordion elements with bootstrap in react?
问题描述
我需要用几个相互嵌套的手风琴制作一张桌子。
我想要的最终结果是这样的：
我想动态地创建这个表，因为我用来自 API 的数据填充它，但是我已经无法通过用硬数据对其进行硬编码来让它完全按照我想要的方式工作。
我的实际代码如下（它是一个 React 组件，但我已对其进行了简化，因此所有 html 都在组件的返回方法中）：
import React, { useEffect, useState } from 'react';
import { FaMinus, FaPlus } from 'react-icons/fa';
const TableComponent: React.FC = () => {
return (
<>
<div className="container test">
<div>
<table className="table table-sm table-bordered table-fixed accordion" id="firstTable">
<thead>
<tr>
<th className="bg-primary">Open first accordion</th>
<th className="bg-primary">First Group of th element</th>
<th className="bg-primary">First Group of th element</th>
<th className="bg-primary">First Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#main-accordion1" data-bs-parent="#firstTable">
<th className="bg-primary">accordion button 1 <FaPlus size={20} /></th>
<td className="bg-primary">First Group of td element</td>
<td className="bg-primary">First Group of td element</td>
<td className="bg-primary">First Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="main-accordion1" data-bs-parent="#firstTable">
<td colSpan={12}>
<div>
<table className="table" id="secondTable">
<thead>
<tr>
<th className="bg-success">Open second accordion</th>
<th className="bg-success">Second Group of th element</th>
<th className="bg-success">Second Group of th element</th>
<th className="bg-success">Second Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion1" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Group of td element</td>
<td className="bg-success">Second Group of td element</td>
<td className="bg-success">Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion1" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion3" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Line of Second Group of td element</td>
<td className="bg-success">Second Line of Second Group of td element</td>
<td className="bg-success">Second Line of Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion3" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#main-accordion2" data-bs-parent="#firstTable">
<th className="bg-primary">accordion button 1 <FaPlus size={20} /></th>
<td className="bg-primary">Second Line of First Group of td element</td>
<td className="bg-primary">Second Line of First Group of td element</td>
<td className="bg-primary">Second Line of First Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="main-accordion2" data-bs-parent="#firstTable">
<td colSpan={12}>
<div>
<table className="table" id="secondTable">
<thead>
<tr>
<th className="bg-success">Open second accordion</th>
<th className="bg-success">Second Second Group of th element</th>
<th className="bg-success">Second Second Group of th element</th>
<th className="bg-success">Second Second Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion2" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Second Group of td element</td>
<td className="bg-success">Second Second Group of td element</td>
<td className="bg-success">Second Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion2" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
)
}
export default TableComponent;
这段代码给了我以下结果：
但是我还有两个问题：
即使在我的 html 中，我的表格中的单元格之间没有边框，我已经指定了
table-borderedclass，你知道这是因为什么吗？当我打开一个手风琴而另一个手风琴已经打开时，已经打开的手风琴会自动关闭，有谁知道如何防止这种行为？
StepUp 请求的 stackbitz 示例：
我放了这两个链接，因为我不确定你想要哪一个，我猜是第二个，但我都怀疑。
1 个解决方案
解决方案1
1 已采纳 2022-07-30 09:37:22
将如此多的表相互嵌套会使 HTML 变得非常不可读。 也许您可以尝试只让<tr>元素折叠，而不是每次都使用新的<table> 。
您可以通过省略data-bs-parent使手风琴保持打开状态
Bootstrap 3：如何制作手风琴面板，只要输入其中的文字？
[英]Bootstrap 3: How to make accordion panels as long as the text in it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.