web-dev-qa-db-fra.com

HTML / Javascript - Développez et réduisez les lignes du tableau (enfants) en cliquant sur une ligne parent

J'essaie de résoudre un problème depuis des jours et j'ai finalement compris que je ne réussirai pas sans aide ... Je veux faire une chose courante que nous voyons tous les jours sur Internet: pouvoir cliquer sur une ligne du tableau pour afficher plus de détails . Mais ici, plus de détails ne signifie pas un bloc de texte mais des lignes enfants qui ont la même forme que les lignes parentes.

Voici un exemple de tableau 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>

Le nombre d'enfant et de parent est flexible, je voudrais un exemple qui gère flexible avec cette caractéristique. Les lignes enfants devront être fermées lors du chargement de la page et ne se développer que si l'utilisateur clique sur la page parent. Si cela est également possible, je voudrais ajouter une icône qui indique à l'utilisateur la possibilité de cliquer sur une ligne (essentiellement un "+" et un "-"), mais pas une simple chaîne, une véritable icône.

J'ai vu et suivi de nombreux exemples , mais aucun d'entre eux n'a parfaitement fait le travail et a essayé de modifier les exemples ... pas de succès. La plupart d'entre eux étaient des exemples basés sur des tables de données et je ne veux pas les utiliser.

Pouvez-vous m'aider s'il vous plaît ? Je sais que ma question est assez complète et je demande une grande partie du travail, mais je n'ai pas trouvé d'exemple complet pour faire ce que je veux en utilisant uniquement HTML, CSS, Javascript.

Je vous remercie.

Modifier après la réponse d'Andrei Gheorghiu:

J'aimerais enfin pouvoir cliquer uniquement sur l'icône plutôt que sur toute la ligne, j'ai d'autres boutons sur la même ligne, et si je clique dessus, cela active l'ouverture de l'enfant. Alors ce que j'ai fait, en attendant une meilleure solution:

HTML: Changer "tr" en une classe "td" spécifique et ajouter la ligne d'icônes dans cette classe "td.toto".

JS:

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

Est-il donc possible de suivre la structure de votre solution, mais de modifier uniquement la cible de clic? Par meilleure solution, je voulais dire, de cliquer uniquement sur l'icône plutôt que sur l'ensemble du "td" maintenant.

Je vous remercie.

javascriptjqueryhtmlcsszurb-foundation
8
C.Brn

Vous devrez envelopper chaque groupe de parents + enfants dans un <tbody> pour cela et utilisez un petit script pour basculer un nom de classe sur ce parent <tbody>. Voici un exemple:

$('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