{"id":184,"date":"2009-01-22T00:39:24","date_gmt":"2009-01-22T02:39:24","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=184"},"modified":"2009-01-22T02:07:42","modified_gmt":"2009-01-22T04:07:42","slug":"destacando-linhas-de-tabelas-ao-passar-o-mouse","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/jquery\/destacando-linhas-de-tabelas-ao-passar-o-mouse","title":{"rendered":"Destacando linhas de tabelas ao passar o mouse"},"content":{"rendered":"

O efeito de destacar linhas de uma tabela consiste em alterar a formata\u00e7\u00e3o da linha que recebe o foco. Destacando ela das demais. Dessa forma o visitante do site consegue se localizar mais f\u00e1cil na tabela, sem ter que passar o dedo na tela para ler as informa\u00e7\u00f5es de uma linha da tabela.
\nNesse primeiro exemplo vamos criar um script que destaque a linha que recebe o foco do mouse.
\nPara criar esse efeito vamos utilizar o m\u00e9todo hover (sobre, fora). Esse m\u00e9todo executa duas fun\u00e7\u00f5es, a primeira quando o mouse passa sobre o seletor e a outra quando o mouse sai de cima do seletor.
\n
\nUtilizando CSS vamos criar uma classe chamada destaque. Vamos inserir essa classe atrav\u00e9s de script jQuery. A classe vai funcionar da seguinte forma: quando o usu\u00e1rio p\u00f5e o mouse sobre a linha a classe \u00e9 chamada, quando o usu\u00e1rio retira o mouse da linha a classe \u00e9 removida.
\nCSS<\/strong>
\n.destaque{background:#FFFF99;color:#FF0000;}<\/p>\n

HTML<\/strong><\/p>\n

\r\n<table id="curso">\r\n<caption>Tabela de cursos de gradua\u00e7\u00e3o<\/caption>\r\n<thead>\r\n\t<tr>\r\n    \t<th scope="col">CURSO<\/th>\r\n        <th scope="col">PER\u00cdODO<\/th>\r\n        <th scope="col">CIDADE<\/th>\r\n        <th scope="col">VAGAS<\/th>\r\n    <\/tr>\r\n<\/thead>\r\n<tfoot>\r\n\t<tr>\r\n    \t<td colspan="6">Estes cursos exigem do aluno prova de habilidades.<\/td>\r\n    <\/tr>\r\n<\/tfoot>\r\n<tbody>\r\n\t<tr>\r\n    \t<td>Arquitetura e Urbanismo<\/td>\r\n        <td>diurno<\/td>\r\n        <td>S\u00e3o Paulo<\/td>\r\n        <td>50<\/td>\r\n    <\/tr>\r\n\t<tr>\r\n    \t<td>Biblioteconomia<\/td>\r\n        <td>Noturno<\/td>\r\n        <td>Porto Alegre<\/td>\r\n        <td>30<\/td>\r\n    <\/tr>\r\n... resto da marca\u00e7\u00e3o...\r\n<\/tbody>\r\n<\/table>\r\n<\/pre>\n
Script jQuery para o efeito<\/strong><\/p>\n
\r\n$(function(){\r\n$('table#curso tbody tr').hover(\r\n\tfunction(){\r\n\t\t$(this).addClass('destaque');\r\n\t},\r\n\tfunction(){\r\n\t\t$(this).removeClass('destaque');\r\n\t}\r\n\t);\r\n});\r\n<\/pre>\n