我已经试了几天来解决一个问题,最终明白如果没有帮助就不可能成功... 我想做一个我们在网上每天都能看到的普通事情:点击表格行以显示更多细节。 但是这里的更多细节并不是一段文本块,而是具有与父行相同形状的子行。
这是一个 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”类中添加图标行。
JS:
$('table').on('click', 'td.toto', function(){
console.log("Check click works: ");
$(this).closest('tbody').toggleClass('open');
});
那么,按照您的解决方案结构,只更改点击目标是否可能?通过更好的解决方案,我的意思是现在仅点击图标而不是整个"td"。
谢谢。
'tr.parent'
改为'tr.parent .fa-chevron-down'
。回答已更新。你可能还需要增加其填充值(当前很小,不容易点击),可以使用.parent i {margin: -.5rem;padding:.5rem}
来实现。 - tao.parent
部分(仅当它在.parent
中时才需要)。祝编码愉快! - tao