HTML / Javascript - 通过单击 parent 行展开和折叠 table 行（子行）

Question

几天来我一直在努力解决一个问题，最后明白没有帮助我不会成功......我想做一件我们每天在互联网上看到的常见事情：能够点击 table 行以显示更多详细信息。但这里的更多细节并不意味着文本块，而是 child 行，其形状与 parent 行相同。

这里有一个例子 HTML table :

<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>

child和parent的数量是灵活的，我想要一个具有该特性的灵活管理的例子。 Child 行在页面加载时必须关闭，只有当用户单击 parent 行时才会展开。如果也可以的话，我想添加一个图标，向用户指示点击一行的能力（基本上是一个“+”和一个“-”），而不是一个简单的字符串，一个真正的图标。

我看到并关注了很多 examples，但没有一个人能完美地完成工作并尝试修改示例……没有成功。大部分都是基于Datatables的例子，我不想用它

你能帮帮我吗？我知道我的问题很满，我要求做大部分工作，但没有找到一个完整的例子来做我想做的事情，只使用 HTML、CSS、Javascript .

谢谢。

根据 Andrei Gheorghiu 的回答进行编辑：

我希望最终能够只点击图标而不是整行，我在同一行上还有其他按钮，如果我点击，它会激活 child 打开。所以我做了什么，等待更好的解决方案：

HTML : 将 "tr" 更改为特定的 "td" class 并在此 "td.toto" class.

中添加图标行

JS :

$('table').on('click', 'td.toto', function(){
  console.log("Check click works: ");
  $(this).closest('tbody').toggleClass('open');
});

那么是否可以遵循您的解决方案结构，但只更改点击目标？通过更好的解决方案，我的意思是，现在只单击图标而不是整个 "td"。

谢谢。

Answer 1

为此，您需要将每组 parent + children 包装在 <tbody> 中，并使用一个小脚本来切换此 class 名称=25=] <tbody>。这是一个例子：

$('table').on('click', 'tr.parent .fa-chevron-down', function(){
  $(this).closest('tbody').toggleClass('open');
});

.parent ~ .cchild {
  display: none;
}
.open .parent ~ .cchild {
  display: table-row;
}
.parent {
  cursor: pointer;
}
tbody {
  color: #212121;
}
.open {
  background-color: #e6e6e6;
}

.open .cchild {
  background-color: #999;
  color: white;
}
.parent > *:last-child {
  width: 30px;
}
.parent i {
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  margin: -.5rem;
  padding: .5rem;
 
}
.open .parent i {
  transform: rotate(180deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="container">
    <table class="table">
        <tr>
            <th>Age</th>
            <th>Sex</th>
            <th>Name</th>
            <th colspan="2">From</th>
        </tr>

        <tbody>
        <tr class="parent">
            <td>100</td>
            <td>M</td>
            <td>Dodo</td>
            <td>UK</td>
            <td><i class="fa fa-chevron-down"></i></td>
        </tr>
        <tr class="cchild">
            <td>10</td>
            <td>M</td>
            <td>Child</td>
            <td colspan="2">UK</td>
        </tr>
        <tr class="cchild">
            <td>10</td>
            <td>M</td>
            <td>Child</td>
            <td colspan="2">UK</td>
        </tr>
        <tr class="cchild">
            <td>10</td>
            <td>M</td>
            <td>Child</td>
            <td colspan="2">UK</td>
        </tr>
        </tbody>
        <tbody>
        <tr class="parent">
            <td>100</td>
            <td>M</td>
            <td>Dodo</td>
            <td>UK</td>
            <td><i class="fa fa-chevron-down"></i></td>
        </tr>
        <tr class="cchild">
            <td>10</td>
            <td>M</td>
            <td>Child</td>
            <td colspan="2">UK</td>
        </tr>
        <tr class="cchild">
            <td>10</td>
            <td>M</td>
            <td>Child</td>
            <td colspan="2">UK</td>
        </tr>
        <tr class="cchild">
            <td>10</td>
            <td>M</td>
            <td>Child</td>
            <td colspan="2">UK</td>
        </tr>
        </tbody>
    </table>
</div>

HTML / Javascript - 通过单击 parent 行展开和折叠 table 行（子行）

HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

html

javascript

css

jquery

zurb-foundation