Question

我正在尝试使用JS在HTML中创建一个包含可折叠行的表，但它根本无法正常工作。点击带有类标题的行时没有任何反应1这里是我写过的代码：

<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>

有人可以告诉我，我做错了什么吗？

Answer 1

<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引用。

Answer 2

$('.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'延迟。你为什么不在数据存在的标签中给出另一个叫做“数据”的类。

<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);
});

它将使用“data”类切换所有标签。

Answer 3

如果给表行提供静态高度，则slideToggle更加明显，但不像在div上那样平滑。请参阅附件jsFiddle（and hat tip to this post that showed me the way）：

＆＃13;

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

＆＃13;

    table tr td {
    border: 1px solid aqua;
    }

table tr {
height: 100px;
}

tr.header1 {
cursor: pointer;
}

＆＃13;

<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>

＆＃13;

使用JS在HTML中创建可折叠行

3 个答案: