jQuery ne mettant en évidence les colonnes sélectionnées que dans un tableau

Question

Je vois cet article sur highlighting even columns mais puis-je mettre en surbrillance uniquement les colonnes sélectionnées?

Voici le code qu'ils utilisent:

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue"); 

Mais je voudrais: NOTE: le class="highlight" sera sur les colonnes sélectionnées, donc si je choisi la colonne 3 du class="highlight" seraient retirés de la colonne 2 et ajouté à la colonne 3. jQuery doit ajouter la classe en fonction de la colonne sélectionnée.

<table class="tbl"> 
    <tr> 
     <th class="firstColumn"> 
      Cell 1:Heading 
     </th> 
     <th class="highlight"> 
      Selected column so this should be highlighted 
     </th> 
     <th> 
      Cell 3:Heading 
     </th> 
     <th> 
      Cell 4:Heading 
     </th> 
     <th> 
      Cell 5:Heading 
     </th> 
    </tr> 
    <tr> 
     <td> 
      Cell 1:Row 1 
     </td> 
     <td class="highlight"> 
      Selected column so this should be highlighted 
     </td> 
     <td> 
      Cell 3:Row 1 
     </td> 
     <td> 
      Cell 4:Row 1 
     </td> 
     <td> 
      Cell 5:Row 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Cell 1:Row 2 
     </td> 
     <td class="highlight"> 
      Selected column so this should be highlighted 
     </td> 
     <td> 
      Cell 3:Row 2 
     </td> 
     <td> 
      Cell 4:Row 2 
     </td> 
     <td> 
      Cell 5:Row 2 
     </td> 
    </tr> 
</table> 

Answer 1

Vous pouvez jeter un oeil à jQuery tableHover plugin pour y parvenir. Ensuite, utilisez quelque chose comme ça

$('table.tbl').tableHover({ 
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
}); 

EDIT:

Quelque chose comme ça?

Working Demo- Cliquez sur une cellule, pour mettre en évidence la colonne

code de démonstration -

$(function() { 
    var rows = $('table.tbl tr'); 

    rows.children().click(function() { 

    rows.children().removeClass('highlight'); 
    var index = $(this).prevAll().length; 
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight'); 

    }); 
}); 

Answer 2

Si vous créez un lien dans vos en-têtes de table, vous pouvez faire quelque chose comme ça :

$("table.tbl th a").click(function() { 
    var colnum = $(this).closest("th").prevAll("th").length; 

    $(this).closest("table").find("tr td").removeClass("highlight"); 
    $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight"); 
} 

Cela va définir toutes les cellules en dessous du lien cliqué en classe "highlight".

Bien sûr, vous devez toujours définir le style correct dans votre fichier CSS:

table.tbl tr .highlight { background-color: blue; } 

Answer 3

avez-vous concidered à l'aide colgroups au lieu d'ajouter des classes à chaque cellule?

i récemment commencé à voir la puissance de colgroups moi-même, et ils fonctionnent comme ceci:

.highlight { 
 
    background-color: yellow; 
 
}

 <table id="myTable"> 
 
    \t  
 
    \t  <colgroup class="highlight"></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  
 
    \t  <thead> 
 
    \t  <tr> 
 
    \t   <th>header1</th> 
 
    \t   <th>header2</th> 
 
    \t   <th>header3</th> 
 
    \t   <th>header4</th> 
 
    \t   <th>header5</th> 
 
    \t  </tr> 
 
    \t  </thead> 
 
    \t  <tbody> 
 
    \t  <tr> 
 
    \t   <td>cell a</td> 
 
    \t   <td>cell b</td> 
 
    \t   <td>cell c</td> 
 
    \t   <td>cell d</td> 
 
    \t   <td>cell e</td> 
 
    \t  </tr> 
 
     \t <tbody> 
 
    <table>

cela rendrait une table avec 5 colonnes, où 1 colonne a la classe css mettre en évidence le premier col. Donc, en fait, la seule chose que vous avez à faire est d'ajouter une fonction au survol de chaque cellule, pour ajouter simplement la classe de mise en surbrillance au groupe correspondant.

il y a une videoguide complète, vous trouverez ici: table fix header, and row + column highlighting.

* ÉDITÉ la réponse parce qu'il était hors de propos, je lis la mauvaise question, et a répondu à une question tout à fait différente. (Ajouté une réponse correcte maintenant)

Answer 4

Voici ce que j'utilise pour ajouter une croix affecte à ma table:

$('tbody td').hover(function() { 
    $(this).closest('tr').find('td,th').addClass('highlight'); 
    var col = $(this).index()+1; 
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight'); 
}, function() { 
    $(this).closest('tr').find('td,th').removeClass('highlight'); 
    var col = $(this).index()+1; 
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight'); 
}); 

semble fonctionner un peu lent sur de grandes tables bien (la mise en évidence est en retard).

Answer 5

Si vous souhaitez prendre en charge colspan et rowspan, vous devez d'abord créer un index de cellule de table, c.-à-d. matrice qui identifie la positition de cellule dans chaque ligne indépendamment du balisage. Ensuite, vous devez suivre les événements de toutes les cellules du tableau d'intérêt et calculer leur décalage dans la matrice et les colonnes qui partagent l'index vertical.

La recherche résultante est illustrée dans l'animation suivante:

J'ai écrit un plug-in qui déclenche une wholly.mouseenter et wholly.mouseleave événements pour les colonnes. Wholly.

Answer 6

Vous pouvez utiliser un plugin appelé entièrement. J'ai lu le tutoriel complet sur comment l'intégrer ici http://voidtricks.com/wholly-jquery-plugin/