JSを使用してHTMLで折りたたみ可能な行を作成する

JSを使用してHTMLで折りたたみ可能な行を含む表を作成しようとしていますが、単純に機能しません。私はクラスHEADER1で行をクリックしてくださいここで私が書いたコードだとき何も起こりません：私は何も悪いことをやっている場合JSを使用してHTMLで折りたたみ可能な行を作成する

<html> 
<body> 
<table> 
<tr style="background-color: darkcyan;"> 
    <th>Column 1</th> 
    <th>Column 2</th> 
    <th>Column 3</th> 
    <th>Column 4</th> 
    <th>Column 5</th> 
</tr> 

<tr class="header1"> 
    <td colspan="5">Header Row</td> 
</tr> 

<tr> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
</tr> 

<tr> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
</tr> 

</table> 

<script> 
$('.header1').click(function(){ 
$(this).nextUntil('tr.header1').slideToggle(1000); 
}); 
</script> 
</body> 
</html>

は、誰かが私に言うことはできますか？

出典

2016-12-15 Saksham Arora

こんにちは、私は、それをチェックし、それは遅いが、それは動作します。 – Bhavana

http://jsfiddle.net/Q8KVC/1870/ – Bhavana

$（this）.nextUntil（ 'tr.header1'）。slideToggle（1000）; 1000の代わりに10などを指定すると、トグルが速く発生します。 – Bhavana

$('.header1').click(function(){ 
 
$('.data').slideToggle(100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<body> 
 
<table> 
 
<tr style="background-color: darkcyan;"> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    <th>Column 3</th> 
 
    <th>Column 4</th> 
 
    <th>Column 5</th> 
 
</tr> 
 

 
<tr class="header1"> 
 
    <td colspan="5">Header Row</td> 
 
</tr> 
 

 
<tr class="data"> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
</tr> 
 

 
<tr class="data"> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
</tr> 
 

 
</table> 
 

 

 
</body>

でも、あなたのコードは動作しています。それを '100'遅延に変更します。なぜあなたは、データが存在するタグに 'data'と呼ばれる別のクラスを与えないのですか？

<tr class="data"> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
</tr>

これを試してください。

$('.header1').click(function(){ 
$('.data').slideToggle(100); 
});

これは、クラス「データ」を持つすべてのタグを切り替えます。

出典

2016-12-15 11:08:57 Navneeth

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('.header1').click(function(){ 
$(this).nextUntil('tr.header1').slideToggle(10); 
}); 
}); 
</script> 
</head> 
<body> 
<table> 
<tr style="background-color: darkcyan;"> 
    <th>Column 1</th> 
    <th>Column 2</th> 
    <th>Column 3</th> 
    <th>Column 4</th> 
    <th>Column 5</th> 
</tr> 

<tr class="header1"> 
    <td colspan="5">Header Row</td> 
</tr> 

<tr> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
</tr> 

<tr> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
    <td>Data</td> 
</tr> 

</table> 
</body> 
</html>

私はこのコードをw3schoolsエディタで試してみましたが、うまくいきました。 jQueryリファレンスが追加されました。

出典

2016-12-15 11:08:47 Bhavana

テーブルの行に静的な高さを指定すると、slideToggleの方がはるかに目立ちますが、divで行ったように滑らかではありません。添付jsFiddle（and hat tip to this post that showed me the way）を参照してください：

$('.header1').click(function(){ 
 
$(this).nextUntil('tr.header1').slideToggle('fast'); 
 
});

table tr td { 
 
    border: 1px solid aqua; 
 
    } 
 

 
table tr { 
 
height: 100px; 
 
} 
 

 
tr.header1 { 
 
cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
<body> 
 
<table> 
 
<tr style="background-color: darkcyan;"> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    <th>Column 3</th> 
 
    <th>Column 4</th> 
 
    <th>Column 5</th> 
 
</tr> 
 

 
<tr class="header1"> 
 
    <td colspan="5">Header Row</td> 
 
</tr> 
 

 
<tr> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
</tr> 
 

 
<tr> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
    <td>Data</td> 
 
</tr> 
 

 
</table> 
 
</body> 
 
</html>

出典

2016-12-15 11:11:37

JSを使用してHTMLで折りたたみ可能な行を作成する

答えて

関連する問題