jQuery soulignant sélectionné uniquement des colonnes dans un tableau

Je vois ce post sur soulignant même des colonnes mais ce que je peux mettre en évidence 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: la class="highlight" sera sur les colonnes sélectionnées, donc, si je choisis la colonne 3 du class="highlight" serait retiré de la colonne 2 et ajoutés à la colonne 3. jQuery doit ajouter la classe basée sur 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>
InformationsquelleAutor Phill Pafford | 2009-07-17
  1. 17

    Vous voudrez peut-être jeter un oeil à jQuery plugin tableHover pour atteindre cet objectif. Ensuite, utilisez quelque chose comme cela

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

    EDIT:

    Quelque chose comme cela?

    Travail De Démonstration - Cliquez sur une cellule, pour mettre en surbrillance la colonne

    Code de démo -

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

  });
});
    • J'ai aimé le tableHover plugin, mais en fait, je suis à la recherche pour modifier le CSS dans les colonnes d'un tableau, mais je si pour l'exemple, je voudrais juste utiliser en évidence. Mais le plugin va aller dans mon espace de travail très bientôt, Merci 🙂
    • Merci c'est ce dont j'avais besoin. Toute chance vous pourriez aider sur mon autre question? J'ai ajouté votre code ainsi: stackoverflow.com/questions/1126489/...
    • Le Plugin fonctionne très bien, cependant colspans ne sont pas pris en charge - il de compliquer à travers
    • btw, rows.find(':nth-child... n'est pas portée à juste immédiate enfants donc si vous avez un ensemble complexe de travées/éléments à l'intérieur de chaque td il va également de ramassage de ceux-ci. Vous pouvez augmenter la spécificité de l'sélecteur d'enfant comme ceci: '> :nth-child(1)'
    InformationsquelleAutor Russ Cam
  2. 4

    avez-vous considérées à l'aide de colgroups au lieu d'ajouter des classes à chaque cellule?

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

    CSS:

    .highlight {
    background-color: yellow; 
 }

    HTML:

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

    ce serait rendre un tableau à 5 colonnes, où 1 de la colonne a de la classe css pour mettre en surbrillance le premier col. donc, en fait, la seule chose que vous avez à faire, ajouter une fonction à la passez de chaque cellule, d'ajouter simplement la mise en évidence de la classe correspondant à l'colgroup.

    n'est videoguide vous pouvez trouver ici:tableau fix-tête de rangée et de + colonne de mettre en lumière.

    *RÉDACTION de la réponse, car il était hors de propos, j'ai lu la question du mal, et a répondu à une question totalement différente. (ajout d'une réponse correcte maintenant)

    • J'ai aimé la vidéo et avait pensé colgroups mais ne pouvait pas les faire travailler dans mes précédentes tentatives. Va ajouter ce site à mes favoris, merci 😉
    • Toute chance vous pourriez regarder mon autre question? stackoverflow.com/questions/1126489/...
    InformationsquelleAutor Sander
  3. 3

    Voici ce que j'utilise pour l'ajout d'une croix affecter à 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 mais que la mise en évidence à la traîne).

    InformationsquelleAutor mpen
  4. 1

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

    $("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");
}

    Qui va définir toutes les cellules ci-dessous le lien cliqué dans la catégorie "fort".

    De sûr, vous devriez continuer à définir le style correct dans votre fichier CSS:

    table.tbl tr .highlight {  background-color: blue; }
    InformationsquelleAutor Philippe Leybaert
  5. 1

    Si vous voulez soutenir colspan et rowspan, alors tout d'abord vous avez besoin pour construire une cellule de tableau d'index, c'est à dire. la matrice qui identifie la cellule positition dans chaque ligne indépendamment de la majoration. Alors vous avez besoin pour suivre les événements de toutes les cellules de la table de l'intérêt et de calculer leur décalage dans la matrice et les colonnes qui partagent la verticale de l'index.

    De la résultante de recherche est illustré dans l'animation suivante:

    jQuery soulignant sélectionné uniquement des colonnes dans un tableau

    J'ai écrit un plugin qui déclenche une wholly.mouseenter et wholly.mouseleave événements pour les colonnes. Entièrement.

    InformationsquelleAutor Gajus
  6. 0

    Vous pouvez utiliser un plugin appelé entièrement. Vous pouvez lire le tutoriel complet sur la façon de l'intégrer ici
    http://voidtricks.com/wholly-jquery-plugin/

    InformationsquelleAutor Anand Roshan