Переключить в таблицах с помощью JavaScript/JQuery

Question

Я пытаюсь показать строки таблицы, когда я нажимаю на th, но я понятия не имею, как это сделать. вот что я есть сейчас:

<th colspan="3" class="subth">Empresa São João</th> 
         <tr class="hidethis"> 
          <td>1</td> 
          <td>Linha Tangerina</td> 
          <td>R$ 20,05</td> 
         </tr> 

и JQuery/JavaScript, как это:

     $('.hidethis').hide(); 
         $('.subth').click(function(){ 
          $(this).next().toggle(); 
         }); 

Я имею в виду, если эта часть кода не достаточно, я могу отправить больше после

* Редактировать: * Скрытие работает, что не работает, это переключатель! благодаря

Если я использую это: $('tbody').click(function(){ $(this).find('tr').toggle(); });

это «работает» вещь: у меня есть два-й с тр-х годов, так как они показывают, в то же время.

* редактировать 2,0: *

Ребята, я бы получил его! Я имею в виду, это не идеально, потому что это будет всегда показывать один набор <tr>, но это нормально, я думаю Вот код, который я придумал (Это, вероятно, пиздец, лол)

$('.hidethis2').hide(); 

$('tbody').click(function(){ 
    $('tr.hidethis').toggle(); 
    $('tr.hidethis2').toggle(); 
}); 

Спасибо!

Answer 1

Вот мое решение:

$('th').click(function(ev) { 
 
    $(this).parent('tr').next('.row').toggleClass('hide'); 
 
})

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:100%"> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th colspan="2">Telephone</th> 
 
    </tr> 
 
    <tr class="row"> 
 
    <td>Bill Gates</td> 
 
    <td>55577854</td> 
 
    <td>55577855</td> 
 
    </tr> 
 
</table>

Answer 2

разок попробовать

$(document).ready(function(){ 
 
$('th').click(function(){ 
 
$('.next-tr').fadeToggle(); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:100%;"> 
 
    <tr height="25"> 
 
    <th width="50%">1St</th> 
 
    <th width="50%">2Nd</th> 
 
    </tr> 
 
    <tr class="next-tr"> 
 
    <td style="text-align:center;">1</td> 
 
    <td style="text-align:center;">2</td> 
 
    </tr> 
 
    </table>

Answer 3

Может быть, это ваше решение ..

<table border="1px"> 
<tr> 
    <th colspan="3" class="subth"> 
     My header 
    </th> 
</tr> 
<tr class="hidethis"> 
    <td>1</td> 
    <td>Linha Tangerina</td> 
    <td>R$ 20,05</td> 
</tr> 
</table> 

И JQuery Файл:

<script> 
    $(document).ready(function(){ 
    $(".subth").click(function(){ 
     $(".hidethis").toggle(); 
    }); 
}); 
</script> 

Подумайте, что это ваше решение ..thanks ..