Realçar linhas em tabelas HTML com um clique

Ao criar páginas da Web em HTML, você pode usar funções JavaScript para alterar a aparência dos elementos da página na interação do usuário. Para realçar certas linhas em uma tabela, você pode definir declarações de Folha de Estilos em Cascata para essas linhas em seu estado normal e em seu estado realçado. Ao adicionar um atributo listener de evento aos elementos de linha, sua página pode chamar uma função JavaScript para executar onclicks, alterando os atributos de nome de classe do elemento dinamicamente e, subsequentemente, alterando sua aparência.

1

Crie sua tabela HTML. Adicione o seguinte código de marcação de amostra ao seu arquivo de página da Web:

Esta tabela contém duas linhas, cada uma com três colunas. Cada uma das células tem um número para demonstração, mas você pode incluir qualquer conteúdo que desejar em sua própria página.

2

Adicione uma seção para CSS na seção principal de sua página. Entre as tags head de abertura e fechamento em seu arquivo, adicione o seguinte esquema de código CSS:

Esse código define as linhas da tabela para ter um plano de fundo branco por padrão, com um plano de fundo vermelho quando o usuário clica nelas. Você pode alterar essas configurações para refletir o estilo da sua própria página. Quando o usuário visualiza a página pela primeira vez, as configurações normais de CSS serão aplicadas, conforme indicado pelos atributos de classe de linha da tabela no código HTML original.

3

Adicione uma seção para JavaScript na seção da cabeça da página. Entre as tags head de abertura e fechamento em seu arquivo, adicione o seguinte código:

Isso cria uma seção de script e um esboço de função. O navegador chamará essa função quando o usuário clicar em qualquer uma das linhas da tabela, passando o valor do atributo ID da linha clicado para que o script possa identificá-lo.

4

Altere o nome da classe dos elementos da linha da sua tabela. Quando a função é executada, isso significa que o usuário clicou em um elemento de linha. Adicione o seguinte código dentro da sua função JavaScript, adquirindo uma referência ao elemento de linha da tabela dentro da página: var row = document.getElementById (rowID);

Adicione a seguinte linha para obter uma cópia da string do nome da classe atual do elemento de linha da tabela: var curr = row.className;

Adicione uma instrução condicional ajustando a aparência da linha da tabela: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "normal";

Se a linha da sua tabela estiver atualmente definida normalmente, a função mudará para ter um status de destaque. Se estiver realçado, a função mudará de volta ao normal. Isso criará um efeito de alternância, com o status de destaque alternando sempre que o usuário clicar na linha.

5

Salve seu arquivo e abra a página em um programa de navegador da Web. Teste a página clicando repetidamente nas linhas. Você deverá ver a cor do plano de fundo mudar cada vez que clicar em uma linha. Se a página não destacar as linhas ao clicar, verifique seu código e abra-o novamente. Aprimore o código para fornecer o nível de realce e apresentação que você deseja que seu site tenha.

Gorjeta

• Ao adicionar ao seu código CSS, você pode ditar a cor do texto e outras propriedades das linhas da sua tabela em cada estado.

Aviso

• JavaScript e CSS têm resultados diferentes nos navegadores, portanto, testar é essencial.