web-dev-qa-db-ja.com

HTML / Javascript-親の行をクリックして、テーブルの行（子）を展開および折りたたむ

私は日々から1つの問題を解決しようとしていて、最終的には助けなしでは成功しないことを理解しました...インターネットで日常的に見られる一般的なことをしたい：詳細を表示するために表の行をクリックできるようにしたい。しかし、ここでより多くの詳細は、テキストのブロックを意味するのではなく、親行と同じ形状を持つ子行を意味します。

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 を見て、それに従いましたが、誰も完全に仕事をして、例を変更しようとしませんでした...成功しませんでした。それらのほとんどはデータテーブルに基づく例であり、私はそれを使用したくありません。

手伝ってくれませんか？私の質問はかなり充実していて、作業の大部分を求めていますが、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」全体ではなくアイコンをクリックすることです。

ありがとうございました。

javascriptjqueryhtmlcsszurb-foundation
8
C.Brn

このため、親+子の各グループを<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,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>
12
tao