2
votes

Comment sélectionner une ligne tr dans un tableau?

Pouvez-vous m'aider? Je veux utiliser ce code pour une table.

En cliquant sur ".click" (dans un td dans la tr-row avant) le (tr suivant ".showme") devrait faire basculer la classe.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table> 
    <tr> 
        <td>1</td> 
        <td class="click">2</td>
    </tr> 
    <tr class="showme Active"colspan="4">
        <td>slidein</td>
    </tr> 
    <tr>
        <td>1</td> 
        <td class="click">2</td>
   </tr>
   <tr class="showme Active"colspan="4">
    <td>slidein</td>
   </tr> 
</table>

 $(document).ready(function() {
   $(".click").click(function() {
     $(this).parent().find(".showme").toggleClass( 'Active Inactive' );
  });
   });

jquery

4 commentaires

Veuillez également publier votre balisage.

Supprimer , de la classe de bascule toggleClass ('Active Inactive');

Désolé, ça ne marche pas, le site dit "mon code est trop long" :-(

il suffit de mettre très peu de structure de table pour que nous puissions comprendre la structure et vous aider

3 Réponses :

0
votes

Existe-t-il un moyen de vérifier quel tr est ouvert et de le fermer, s'il en ouvre un autre?

0 commentaires

0
votes

Vous pouvez utiliser les données parents ("tr") et next(".showme")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td class="click">2</td>
  </tr>
  <tr class="showme Active" colspan="4"><td>slidein</td></tr>
  <tr>
    <td>1</td>
    <td class="click">2</td>
  </tr>
  <tr class="showme Active" colspan="4"><td>slidein</td></tr>
</table>

.showme {
  display: none;
}
.Active {
  display: block;
}

$(document).ready(function() {
   $(".click").click(function() {
     $(this).parents("tr").next(".showme").toggleClass("Active Inactive");
  });
});

0 commentaires

2
votes

Essayez le code ci-dessous: vous pouvez utiliser plus proche pour obtenir le TR parent, puis utiliser next pour obtenir le tr suivant avec la classe showme. En outre, supprimez la virgule dans la méthode toggleclass et utilisez l'espace pour la séparation

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click1">1</td>
    <td class="click2">2</td>
    <td class="click3">3</td>
  </tr>
  <tr class="showme1 Inactive" colspan="3"><td>showme1</td></tr>
  <tr class="showme2 Inactive" colspan="3"><td>showme2</td></tr>
  <tr class="showme3 Inactive" colspan="3"><td>showme3</td></tr>
  <tr>
    <td class="click1">1</td>
    <td class="click2">2</td>
    <td class="click3">3</td>
  </tr>
  <tr class="showme1 Inactive" colspan="3"><td>showme1</td></tr>
  <tr class="showme2 Inactive" colspan="3"><td>showme2</td></tr>
  <tr class="showme3 Inactive" colspan="3"><td>showme3</td></tr>
</table>

.showme1, .showme2, .showme3 {
  display: none;
}
.Active {
  display: block;
}
.click1, .click2, .click3 {
  color: red;
}
.clicked {
  color: blue;
}

$(document).ready(function() {
  $(".click1").click(function() {
  $('.clicked').not(this).removeClass('clicked');
  $(this).toggleClass('clicked');
  var $next = $(this).parents("tr").nextAll(".showme1:first");
  $next.toggleClass("Active Inactive");
  $('tr.Active').not($next).removeClass('Active');
  });

   $(".click2").click(function() { 
  $('.clicked').not(this).removeClass('clicked');
  $(this).toggleClass('clicked');
   var $next = $(this).parents("tr").nextAll(".showme2:first");
  $next.toggleClass("Active Inactive");
  $('tr.Active').not($next).removeClass('Active');
  });

   $(".click3").click(function() {
  $('.clicked').not(this).removeClass('clicked');
  $(this).toggleClass('clicked');
  var $next = $(this).parents("tr").nextAll(".showme3:first");
  $next.toggleClass("Active Inactive");
  $('tr.Active').not($next).removeClass('Active');
  });
});

REMARQUE: vous avez utilisé colspan = "4" mais le nombre maximum de colonnes est de 2 donc je l'ai changé en colspan = "2" pour créer une structure de tableau sans erreur

MISE À JOUR Veuillez trouver la réponse à votre requête où vous pouvez utiliser nextAll avec la restriction de sélecteur : first afin que vous puissiez basculer Classe pour le premier élément correspondant. Cela supprimera la restriction de la position de l'élément suivant.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table> 
    <tr> 
        <td>1</td> 
        <td class="click">2</td>
    </tr> 
    <tr class="showme Active" colspan="2">
        <td>slidein</td>
    </tr> 
    <tr>
        <td>1</td> 
        <td class="click">2</td>
   </tr>
   <tr class="showme Active" colspan="2">
    <td>slidein</td>
   </tr> 
</table>

.Active {
   color:green;
}

.Inactive {
   color:red;
}

$(document).ready(function() {
   $(".click").on('click',function() {
     $(this).closest('tr').next('tr.showme').toggleClass( 'Active Inactive' );
  });
   });

10 commentaires

Que puis-je faire, quand il y a beaucoup de tr -rows? Comment puis-je gérer cela? (pas la suivante, plutôt la deuxième ou la troisième rangée)

pouvez-vous me donner un exemple de code afin que je puisse vous suggérer la solution. n'importe quel jsfiddle ou codepen ou n'importe quel code live conviendrait

Je n'ai pas pu mettre à jour le stylet de code, j'ai donc modifié la réponse ci-dessus en ajoutant un nouvel extrait de code. Veuillez le renvoyer. Si vous trouvez cette réponse utile, vous pouvez voter pour et accepter la réponse

Merci beaucoup. Maintenant, j'ai mis à jour mon stylo. Y a-t-il un moyen de fermer le tr actif, quand j'en ouvre un autre? De plus je veux ajouter une classe au td actif (quand je clique dessus, il change en classe "blue" et en cliquant sur une autre je reviens en "red"? codepen.io/tho-zei/pen/XWrPgJb

Merci beaucoup. Ça a l'air très bien. La seule chose, il ne redevient pas rouge, quand rien n'est actif.

résolu ce problème également, veuillez vérifier la réponse mise à jour

Je trouve un petit problème. Après quelques clics, "showme" devient la classe active et inactive à la fois.

avez-vous modifié le code et mis du code qui prend du temps à s'exécuter car je ne suis pas en mesure de reproduire ce problème. Si vous pouvez créer un codepen, je peux vérifier que

J'ai mis à jour le codepen codepen.io/tho-zei/pen/XWrPgJb Vous voyez il, lorsque vous ouvrez le Codeinspector depuis votre navigateur. Merci beaucoup de m'aider :-)

J'ai le problème, vous devez remplacer $ ('tr.Active'). Not ($ next) .removeClass ('Active'); par $ ('tr.Active') .not ($ next) .toggleClass ('Actif inactif'); . removeClass supprime l'élément précédemment actif et toggleClass ajoute les deux classes lorsque vous cliquez une deuxième fois .... mon mauvais :)