jQuery destacando colunas seleccionadas apenas em uma mesa

Question

Eu vejo este post sobre destacando até mesmo colunas mas posso destacar colunas só selecionados?

Aqui está o código que eles usam:

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

Mas eu gostaria: NOTA: o class="highlight" será sobre as colunas selecionadas, então se eu selecionados coluna 3 a class="highlight" seria removido da coluna 2 e adicionado à coluna 3. jQuery precisa adicionar a classe com base na coluna selecionada.

<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

Você pode querer dar uma olhada jQuery tableHover plug-in para alcançar este objectivo. Em seguida, use algo como isto

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

EDIT:

Algo como isso?

demonstração de trabalho - Clique em qualquer célula, a realce a coluna

Código de 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

você tem concidered usando colgroups em vez de adicionar classes para cada célula?

i só recentemente começaram a ver o poder de colgroups mim, e eles trabalham como este:

.highlight {
    background-color: yellow; 
 }

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

este tornaria uma tabela com 5 colunas, onde 1 coluna tem classe CSS para realçar a primeira col. então na verdade a única coisa que você tem que fazer em seguida, adicionar uma função ao foco de cada célula, apenas adicionar a classe destacando a colgroup correspondente.

há uma videoguide completa você pode encontrar aqui: cabeçalho correção mesa, e row + destaque coluna.

* EDITADO a resposta porque era irrelevante, eu li o errado pergunta, e respondeu a uma questão totalmente diferente. (Adicionado uma resposta correta agora)

Answer 3

Aqui está o que eu uso para adicionar uma cruz afetar a minha mesa:

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

parece estar a correr um pouco lento em tabelas grandes embora (os desfasamentos destaque para trás).

Answer 4

Se você criar um link em seus cabeçalhos de tabela, você pode fazer algo como isto:

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

Isso irá definir todas as células abaixo o link clicado para a aula "destaque".

É claro, você deve ainda definir o estilo correto em seu arquivo CSS:

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

Answer 5

Se você quiser colspan apoio e rowspan, então primeiro você precisa índice de célula da tabela de construção, ou seja. matriz que positition celular identifica em cada linha, independentemente da marcação. Então você precisa para rastrear eventos de todos as células da tabela de interesse e calcular a sua compensação na matriz e as colunas que compartilham o índice vertical.

A pesquisa resultante é ilustrado no seguinte animação:

Eu escrevi um plugin que desencadeia uma wholly.mouseenter e wholly.mouseleave eventos para colunas. Totalmente .

Answer 6

Você pode usar um plugin chamado integral. Você pode ler o tutorial completo sobre como integrá-lo aqui http://voidtricks.com/wholly-jquery-plugin/