ERRO AO EXIBIR E OCULTAR LINHAS EM TABELA
Bom dia pessoal,
Estou tentando fazer exibir e ocultar linhas de tabelas conforme umas aulas que estou acompanhando na internet, mas não está funcionando corretamente. Alguém poderia me dar uma força para identificar o problema. Ele está exibindo e ocultando da tabela inteira em vez de ocultar apenas do nó que eu clico. Pelo que entendi está sendo no meu HTML.
Agradeço a atenção de vocês!
HTML5
----------
<!DOCTYPE html>
<html lang=[Ô]pt-BR[Ô]>
<head>
<meta charset=[Ô]UTF-8[Ô]/>
<title>Aula23 - Exemplo Core - Mostrar e Ocultar Linhas de Tabela</title>
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/estilo.css[Ô] media=[Ô]all[Ô]/>
<script type=[Ô]text/javascript[Ô] src=[Ô]../jquery/jquery-1.11.2.min.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/script.js[Ô]></script>
</head>
<body>
<table id=[Ô]filmes[Ô]>
<thead>
<tr>
<th id=[Ô]filme[Ô]>Filme</th>
<th scope=[Ô]col[Ô]>Direção</th>
<th id=[Ô]ano[Ô] scope=[Ô]col[Ô]>Ano</th>
<th scope=[Ô]col[Ô]>Gênero</th>
<th scope=[Ô]col[Ô]>Duração</th>
</tr>
</thead>
<tbody>
<tr class=[Ô]sub[Ô]>
<th colspan=[Ô]5[Ô]>Filmes de Comédia</th>
</tr>
<tr>
<th scope=[Ô]row[Ô]>O Bem Amado</th>
<td>Guel Arraes</td>
<td>2010</td>
<td>Comédia</td>
<td>132[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>O Auto da Compadecida</th>
<td>Guel Arraes</td>
<td>2000</td>
<td>Comédia</td>
<td>105[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Deus é Brasileiro</th>
<td>Carlos Diegues</td>
<td>2003</td>
<td>Comédia</td>
<td>110[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Dona Flor e seus Dois Maridos</th>
<td>Bruno Barreto</td>
<td>1976</td>
<td>Comédia</td>
<td>120[ô]</td>
</tr>
<tr class=[Ô]sub[Ô]>
<th colspan=[Ô]5[Ô]>Filmes de Outros Gêneros</th>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Chico Xavier</th>
<td>Daniel Filho</td>
<td>2010</td>
<td>Drama</td>
<td>124[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Carandiru</th>
<td>Hector Babenco</td>
<td>2003</td>
<td>Crime</td>
<td>145[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Central do Brasil</th>
<td>Walter Sales</td>
<td>1998</td>
<td>Drama</td>
<td>113[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Cidade de Deus</th>
<td>Fernando Meirelles</td>
<td>2002</td>
<td>Crime</td>
<td>130[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Lula, O Filho do Brasil</th>
<td>Fábio Barreto</td>
<td>2009</td>
<td>Biográfico</td>
<td>128[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Tropa de Elite</th>
<td>José Padilha</td>
<td>2007</td>
<td>Ação</th>
<td>118[ô]</th>
</tr>
</tbody>
</table>
</body>
</html>
CSS3
--------
@charset [Ô]UTF-8[Ô];
body{
background-color: #e0e0e0;
}
table {
border-spacing: 0;
}
thead th{
background-color: #000;
color: #FFF;
}
hread, tr td, tr th{
border-color: black;
border-style: solid;
border-width: 1px;
text-align: center;
}
tbody {
background-color: white;
}
th#filme {
width: 230px;
}
th#genero, th#duracao {
width: 90px;
}
th#ano{
width: 60px;
}
td {
text-align: center;
vertical-align: middle;
}
.sub th{
text-align: left;
background-color: #CCC;
}
img.maismenos{
/* border: none; */
margin-bottom: -2px;
margin-right: 8px;
margin-left: 4px;
width: 14px;
}
JAVASCRIPT
-----------------
$(document).ready(function(){
$([Ô]tbody tr:not(.sub)[Ô]).hide();
$([Ô].sub th[Ô]).prepend([Ô]<img src=[ô]img/mais.png[ô] class=[ô]maismenos[ô]/>[Ô]);
$([Ô]img[Ô]).click(function(){
var sinal = $(this).attr([Ô]src[Ô]);
if(sinal == [Ô]img/menos.png[Ô]){
$(this).attr([Ô]src[Ô], [Ô]img/mais.png[Ô])
.parents().siblings([Ô]tr[Ô]).hide();
}
else{
$(this).attr([Ô]src[Ô], [Ô]img/menos.png[Ô])
.parents().siblings([Ô]tr[Ô]).show();
}
});
});
Estou tentando fazer exibir e ocultar linhas de tabelas conforme umas aulas que estou acompanhando na internet, mas não está funcionando corretamente. Alguém poderia me dar uma força para identificar o problema. Ele está exibindo e ocultando da tabela inteira em vez de ocultar apenas do nó que eu clico. Pelo que entendi está sendo no meu HTML.
Agradeço a atenção de vocês!
HTML5
----------
<!DOCTYPE html>
<html lang=[Ô]pt-BR[Ô]>
<head>
<meta charset=[Ô]UTF-8[Ô]/>
<title>Aula23 - Exemplo Core - Mostrar e Ocultar Linhas de Tabela</title>
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/estilo.css[Ô] media=[Ô]all[Ô]/>
<script type=[Ô]text/javascript[Ô] src=[Ô]../jquery/jquery-1.11.2.min.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/script.js[Ô]></script>
</head>
<body>
<table id=[Ô]filmes[Ô]>
<thead>
<tr>
<th id=[Ô]filme[Ô]>Filme</th>
<th scope=[Ô]col[Ô]>Direção</th>
<th id=[Ô]ano[Ô] scope=[Ô]col[Ô]>Ano</th>
<th scope=[Ô]col[Ô]>Gênero</th>
<th scope=[Ô]col[Ô]>Duração</th>
</tr>
</thead>
<tbody>
<tr class=[Ô]sub[Ô]>
<th colspan=[Ô]5[Ô]>Filmes de Comédia</th>
</tr>
<tr>
<th scope=[Ô]row[Ô]>O Bem Amado</th>
<td>Guel Arraes</td>
<td>2010</td>
<td>Comédia</td>
<td>132[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>O Auto da Compadecida</th>
<td>Guel Arraes</td>
<td>2000</td>
<td>Comédia</td>
<td>105[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Deus é Brasileiro</th>
<td>Carlos Diegues</td>
<td>2003</td>
<td>Comédia</td>
<td>110[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Dona Flor e seus Dois Maridos</th>
<td>Bruno Barreto</td>
<td>1976</td>
<td>Comédia</td>
<td>120[ô]</td>
</tr>
<tr class=[Ô]sub[Ô]>
<th colspan=[Ô]5[Ô]>Filmes de Outros Gêneros</th>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Chico Xavier</th>
<td>Daniel Filho</td>
<td>2010</td>
<td>Drama</td>
<td>124[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Carandiru</th>
<td>Hector Babenco</td>
<td>2003</td>
<td>Crime</td>
<td>145[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Central do Brasil</th>
<td>Walter Sales</td>
<td>1998</td>
<td>Drama</td>
<td>113[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Cidade de Deus</th>
<td>Fernando Meirelles</td>
<td>2002</td>
<td>Crime</td>
<td>130[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Lula, O Filho do Brasil</th>
<td>Fábio Barreto</td>
<td>2009</td>
<td>Biográfico</td>
<td>128[ô]</td>
</tr>
<tr>
<th scope=[Ô]row[Ô]>Tropa de Elite</th>
<td>José Padilha</td>
<td>2007</td>
<td>Ação</th>
<td>118[ô]</th>
</tr>
</tbody>
</table>
</body>
</html>
CSS3
--------
@charset [Ô]UTF-8[Ô];
body{
background-color: #e0e0e0;
}
table {
border-spacing: 0;
}
thead th{
background-color: #000;
color: #FFF;
}
hread, tr td, tr th{
border-color: black;
border-style: solid;
border-width: 1px;
text-align: center;
}
tbody {
background-color: white;
}
th#filme {
width: 230px;
}
th#genero, th#duracao {
width: 90px;
}
th#ano{
width: 60px;
}
td {
text-align: center;
vertical-align: middle;
}
.sub th{
text-align: left;
background-color: #CCC;
}
img.maismenos{
/* border: none; */
margin-bottom: -2px;
margin-right: 8px;
margin-left: 4px;
width: 14px;
}
JAVASCRIPT
-----------------
$(document).ready(function(){
$([Ô]tbody tr:not(.sub)[Ô]).hide();
$([Ô].sub th[Ô]).prepend([Ô]<img src=[ô]img/mais.png[ô] class=[ô]maismenos[ô]/>[Ô]);
$([Ô]img[Ô]).click(function(){
var sinal = $(this).attr([Ô]src[Ô]);
if(sinal == [Ô]img/menos.png[Ô]){
$(this).attr([Ô]src[Ô], [Ô]img/mais.png[Ô])
.parents().siblings([Ô]tr[Ô]).hide();
}
else{
$(this).attr([Ô]src[Ô], [Ô]img/menos.png[Ô])
.parents().siblings([Ô]tr[Ô]).show();
}
});
});
Veja as alterações que eu fiz no seu exemplo, em anexo.
Eu aconselho a abrir o html no Visual Studio porque dá pra visualizar melhor. é só clicar com o botão direito em cima do arquivo html e em [Ô]Abrir com...[Ô]
Repare nas alterações que eu fiz e nas <tbody> que eu acrescentei.
Espero ter ajudado.
Eu aconselho a abrir o html no Visual Studio porque dá pra visualizar melhor. é só clicar com o botão direito em cima do arquivo html e em [Ô]Abrir com...[Ô]
Repare nas alterações que eu fiz e nas <tbody> que eu acrescentei.
Espero ter ajudado.
Eu entedi o que você fez e ficou muito bom. Pegudo, então da forma que eu escrivi ele reconhecia todas as td e tr abaixo como filho e por isso ele recolhia tudo?
Exato.
Na verdade, a sua tabela tinha apenas um repositório, o <tbody>, então o HTML recolhia tudo e utilizando um <div> como botão, o HTML fica mais leve.
Na verdade, a sua tabela tinha apenas um repositório, o <tbody>, então o HTML recolhia tudo e utilizando um <div> como botão, o HTML fica mais leve.
Obrigada Pegudo pela ajuda!!
Tópico encerrado , respostas não são mais permitidas