Qual é a melhor maneira de linhas alternadas de estilo em uma tabela?

Question

Obviamente, o estilo real das linhas ímpares / mesmo será feito através de uma classe CSS, mas o que é a melhor maneira de "anexar" a classe para as linhas? É é melhor para colocá-lo na marcação, ou é melhor fazê-lo via javascript do lado do cliente? Qual é melhor e por que?

Para simplificar, vamos supor que se trata de uma grande mesa, 100 linhas, e que o esquema de cores é alternando pares / ímpares linhas. Além disso, é necessário algum tipo de biblioteca JavaScript que pode facilmente fazer isso em outro lugar na página e assim a sobrecarga de que o pacote não é um fator.

---

O objetivo real desta questão é determinar o que os trade-offs estão envolvidos, bem como a forma como esses trade-offs devem ser manipulados, como sucessos de desempenho para o servidor se a página é atingido sob carga (assumir uma tabela dinâmica) , acessos de banda larga para usuários com velocidades de conexão mais baixos, sucessos semânticas por adição de código de layout adicional para o HTML (a idéia aqui é que HTML é para conteúdo, CSS é para o layout, e javascript é de como se comporta de conteúdo, bem como controlar / de aumento o layout)

Answer 1

Você pode fazer isso facilmente com jQuery, assim:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

Você pode qualificar o seletor um pouco mais se você só quer fazer isso em uma tabela em particular, ou fazê-lo em elementos 'li' também.

Eu acho que isso é um pouco mais limpo e do lado do cliente mais legível do que seria em alguns ambientes do lado do servidor,

Answer 2

Eu colocá-lo em (lado do servidor) a marcação. Leva o servidor menos de um milissegundo para rowNum = (rowNum - 1) * -1 completa É uma implicância minha, quando um site é lento por causa de quanto javascript está sendo executado.

Answer 3

Como disse em outras respostas, fazê-lo em uma grande mesa no lado do cliente será mais lento do que no lado do servidor, e pode não funcionar se o usuário tem o javascript desabilitado.

No entanto, usando um quadro JS como jQuery torna tão fácil que é realmente tentador:

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 4

Para uma tabela de um tamanho tão grande que eu faria o processamento de linha no lado do servidor, usando PHP ou similar para calcular a nomes de classe par / ímpar para cada linha. Esta solução irá trabalhar para aqueles com JavaScript desligado e será muito maior desempenho do que qualquer biblioteca JavaScript processamento de um elemento de tabela deste tamanho.

No PHP a lógica seria algo parecido

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

Se você não pode fazer qualquer do lado do servidor processando Eu recomendaria ter o JavaScript definir as tags de classe para cada linha, em vez de manipular os estilos diretamente. Desta forma, a apresentação é deixada para o CSS eo comportamento é deixada ao JavaScript e se você mudar a maneira como as classes são gerados em uma data posterior o código de apresentação vai ficar na mesma.

Answer 5

Eu faria isso do lado do servidor inicialmente uma vez que o cliente não pode ter o JavaScript habilitado. Se você está adicionando / linhas remoção do lado do cliente com javascript, então você pode querer também têm a capacidade de fazê-lo no cliente após o evento adicionar / remover completou. Tanto quanto possível, você deve tentar ter o seu comportam interface bem sem Javascript a menos que você pode controlar o ambiente do navegador (digamos, por exemplo, em um aplicativo de intranet onde você pode exigir que ele seja ativado).

Answer 6

Um dia, nós vamos ser capazes de usar Basta puro CSS . Naturalmente, esta parte da especificação CSS foi introduzido em 2001 e ainda não é suportado. = (

Answer 7

O que você está tentando conseguida mesmo pode ser feito com CSS3:

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

Isto também está listado na o w3 é css3 seletores especificação . Se você está à procura de compatibilidade, acrescentando que o server-side classe ou através de javascript seria uma solução muito melhor.

Answer 8

Depende do seu cenário. JavaScript com base pode ser mais rápido para implementar um número de linhas se a tabela não está sendo criado on-the-fly. Se você está criando dinamicamente sua mesa, no entanto, você poderia muito facilmente definir a classe para todas as outras linhas de ser "row_alternate" - eu prefiro o método do lado do servidor, se você está preocupado que alguns de seus usuários podem não ter o JavaScript <. / p>

Answer 9

Se você estiver usando qualquer tipo de estrutura, esta é geralmente uma das primeiras características que incluem.

Else Eu pesquisei para "cores alternadas tabela JScript" e tem várias dezenas de links para técnicas.

(Aparte:. É desenvolvedores muito ruim não obter crédito para o código que eles fez não write)

Answer 10

Eu sempre aplicar a classe no lado do servidor como eles são transmitidos out / adicionado à página, mas se você tiver um do lado do cliente re-classificar as linhas terá de ser classificada-re.

Answer 11

Eu encontrei um site bom explicando o que você quer alcançar usando jQuery:

Aqui está a output- finais http://15daysofjquery.com/examples/zebra/code/demoFinal.php

E aqui está o Tutorial http://15daysofjquery.com/examples/zebra/

Answer 12

Eu diria que realmente que isso depende da situação. Se você está looping através dos dados para criar as linhas no lado do servidor, eu provavelmente diria que você deve fazê-lo lá.

Este fica muito mais complicado se você estiver indo para começar a usar o script do lado do cliente para sort / reordenar as linhas. Neste caso, se é 100 linhas ou assim que eu poderia estar inclinado a fazê-lo no lado do evento onload do cliente, porque pelo menos dessa forma você não está duplicando código para determinar a cor da linha. Eu vou admitir, ele realmente depende da velocidade dele neste caso. Eu provavelmente experimentá-lo e ver se o desempenho é aceitável antes de tomar uma decisão final.