小编C.B*_*Brn的帖子

我试图解决一个问题,因为我终于明白,如​​果没有帮助,我将不会成功...我想做一个我们每天在互联网上看到的共同点:能够点击表格行以显示更多细节.但是这里更多细节并不意味着文本块,而是与父行具有相同形状的子行.

以下是HTML表的示例:

<table class="collapse table">
<tr>
    <th>Age</th>
    <th>Sex</th>
    <th>Name</th>
    <th>From</th>
</tr>
<tr class="parent">
    <td>100</td>
    <td>M</td>
    <td>Dodo</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="parent">
    <td>100</td>
    <td>M</td>
    <td>Dodo</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>
<tr class="cchild">
    <td>10</td>
    <td>M</td>
    <td>Child</td>
    <td>UK</td>
</tr>

孩子和父母的数量是灵活的,我想要一个灵活管理这个特征的例子.页面加载时必须关闭子行,并且仅当用户单击父页时才展开.如果有可能我想添加一个图标,指示用户点击一行(基本上是"+"和" - "),但不是一个简单的字符串,一个真正的图标.

我已经看到并遵循了许多例子,但他们中没有人完美地完成这项工作,并试图修改例子......没有成功.其中大多数是基于Datatables的示例,我不想使用它.

你能帮我吗 ？我知道我的问题非常充实,我要求做大部分工作,但没有找到一个完整的例子来做我想要的HTML,CSS,Javascript.

谢谢.

在Andrei Gheorghiu的回答之后编辑:

我希望最终只能点击图标而不是整行,我在同一行上有其他按钮,如果我点击它,它会激活孩子的开放.所以我做了什么,等待更好的解决方案:

HTML:将"tr"更改为特定的"td"类,并在此"td.toto"类中添加图标行. …