HTML / Javascript – 通过单击父行来展开和折叠表行(子项)

发布时间：2020-12-14 19:45:07 所属栏目：资源来源：网络整理

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

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

以下是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>

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

我已经看过很多examples了,但是没有人能完美地完成这项工作并试图修改例子……没有成功.其中大多数是基于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”.

谢谢.

解决方法

您需要将每组父级子项包装在< tbody>中.为此,并使用一个小脚本切换此父级< 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,.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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!