Question

我正在对this答案进行一些修改，以使标题行可折叠在HTML表中。

我想修改JS代码段，以使行折叠而不是默认展开（在页面加载/文档就绪时）。我该怎么做？

基本上我想要达到的目的是：

$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){

除了单击和切换标题行外，还可以在页面加载/刷新时运行一次。

我知道我需要在HTML中更改两个标签<span>+</span>，但是在如何在页面加载时触发此行为方面还是有困难的。

Javascript：

$(document).ready(function(){
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

HTML：

<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

CSS：

table, tr, td, th
{
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header
{
    cursor:pointer;
}

JSFiddle：https://jsfiddle.net/mkb39x0u/

Answer 1

似乎您只是在document.ready中这样做：

$('tr:not(.header)').hide();

Demo

此外，我可能会用行和CSS上的类来切换您的加号和减号字符的可见性，而不是使脚本变得混乱。

Answer 2

我只是通过很少的 JS更改来更新您的代码，希望对您有所帮助。谢谢

在点击方法之前添加以下JS代码

$('tr.header').nextUntil('tr.header').slideToggle(100);

$(document).ready(function(){
    $('tr.header').nextUntil('tr.header').slideToggle(100);
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header {
    cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

通过CSS实现此功能的另一种方法

$(document).ready(function(){
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid #000;
  display: none;
}

td + td {
  border-left: 1px solid #000;
}

tr + tr {
  border-top: 0;
}

tr.header {
  cursor: pointer;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

默认情况下折叠HTML表行

2 个答案: