jQuery evidenziando solo le colonne selezionate in una tabella

Question

Vedo questo post su highlighting even columns ma posso evidenziare solo le colonne selezionate?

ecco il codice che usano:

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

Ma vorrei: NOTA: il class="highlight" sarà sulle colonne selezionate, quindi se ho selezionato colonna 3 della class="highlight" verrebbe rimosso dalla colonna 2 e ha aggiunto alla colonna 3. jQuery deve aggiungere la classe in base alla colonna selezionata.

<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

Si potrebbe voler dare un'occhiata a jQuery tableHover plugin per raggiungere questo obiettivo. Quindi utilizzare qualcosa di simile

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

EDIT:

qualcosa di simile?

Working Demo- Clicca su qualsiasi cella, per evidenziare la colonna

Codice da demo -

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

Se si crea un collegamento nelle intestazioni di tabella, si può fare qualcosa di simile :

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

Ciò imposterà tutte le celle sotto il collegamento cliccato alla classe "evidenziare".

Naturalmente, si dovrebbe comunque impostare lo stile corretto nel file CSS:

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

Answer 3

hanno si concidered utilizzando colgroups invece di aggiungere classi per ogni cellula?

Ho solo di recente iniziato a vedere la potenza di colgroups me stesso, e funzionano in questo modo:

.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>

questo renderebbe una tabella con 5 colonne, dove 1 colonna ha classe CSS per evidenziare il primo col. quindi in realtà l'unica cosa che devi fare, quindi, aggiungere una funzione al passaggio del mouse su ogni cella, per aggiungere semplicemente la classe di evidenziazione al corrispondente gruppo.

c'è una videoguida completa si può trovare qui: table fix header, and row + column highlighting.

* A CURA la risposta perché era irrilevante, ho letto la domanda sbagliata, e ha risposto a una questione totalmente diversa. (Aggiunto una risposta corretta ora)

Answer 4

Ecco quello che uso per l'aggiunta di un mirino influisce al mio tavolo:

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

sembra correre un po 'lento su grandi tavoli anche se (l'evidenziazione è in ritardo rispetto).

Answer 5

Se si desidera supportare colspan e rowspan, è necessario innanzitutto creare l'indice della cella della tabella, ad es. matrice che identifica la posizione della cella in ogni riga indipendentemente dal markup. Quindi è necessario tenere traccia degli eventi di tutte le celle della tabella di interesse e calcolare il loro offset nella matrice e le colonne che condividono l'indice verticale.

La ricerca risultante è illustrato nella seguente animazione:

Ho scritto un plugin che fa scattare un wholly.mouseenter e wholly.mouseleave eventi per le colonne. Wholly.

Answer 6

È possibile utilizzare un plug-in chiamato interamente. Puoi leggere il tutorial completo su come integrarlo qui http://voidtricks.com/wholly-jquery-plugin/