Pergunta

I Usuário TableSorter Um plugin jQuery (tenho certeza de que outros sabem sobre isso) no meu projeto. Preciso adicionar um recurso em que, quando os usuários clicam em uma linha, ele é selecionado. Eu tentei o seguinte código, mas não está funcionando.

$('#myTable tr').click(function(event) {
     $(this).addClass('selected');

 });

Alguém poderia me dizer a melhor maneira de fazer isso? Já existe algum plug-in para isso?

Desde já, obrigado,
Abdel Olakara

Foi útil?

Solução

Eu acho que o Tablesorter recria a tabela inteira, para que seja por isso que não há alteração, pois "destrói" o evento de cliques anexado ao TR. Você deve tentar usar um evento ao vivo e ver se isso funciona: Documentação para eventos ao vivo em jquery.com

Outras dicas

Para habilitar a seleção e desmarcar a alternância por meio do JQuery's ToggleClass:

$(document).ready( function() {
    /* jQuery v1.11.1 */
    $( "table.tablesorter tbody tr" ).click(function() {
      $( this ).toggleClass( "selected" );
    });
});

/* CSS for hover row & select/lock the row with color */
table.tablesorter tbody tr:hover td {
    background-color: #f4f5f6;
}
table.tablesorter tbody tr.selected td {
    background-color: #f4f5f6;
}

Isso me parece correto. Você tem uma classe CSS definida para o TR.Selected?

Talvez quando você está clicando, você atinge o elemento TD e não o TR. Talvez você precise usar o pai:

http://docs.jquery.com/traversing/parent

algo assim (não testado):

$('#myTable td').click(function(event) {
         $(this).parent("tr").addClass('selected');

 });

O que você tem parece correto. Você está executando depois que o documento estiver pronto?

$(function() {
    $('#myTable tr').click(function() {
         $(this).addClass('selected');
    });
});

Alternativamente, você pode usar live eventos.

$('#myTable tr').live('click', function() {
     $(this).addClass('selected');
});

Seu evento de clique parece funcionar muito bem na minha mesa, só estou me perguntando como você se selecionaria clicando novamente? Amarrar uma variável para se está selecionado parece uma solução fácil, mas como eu faria isso?

Perdoe minha resposta à sua pergunta com outra pergunta e minha novidade ao JS.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top