HTML + jquery展开了一个关于点击和悬停操作的表格

Question

我在线发现了一些代码，但很难让它上班。我想通过单击折叠标题来展开表格。通过删除<thead>来改变我的表结构，我得到了它的工作 和<tbody>标签，但我需要它们。这是表格代码：

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

 $('.header').click(function() {
   $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
 });

table,
tr,
td,
th {
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}
.header .sign:after {
  content: "\2B9D";
  display: inline-block;
  transition: transform 0.3s;
  transform: rotate(0deg);
}
.header.expand .sign:after {
  /*content:"\2B9F";*/
  transition: transform 0.3s;
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class='testclass'>
  <table>
    <thead>
      <tr class="header expand">
        <th colspan="8"><a style='text-decoration:none;'>Test Table <span class="sign"></span></a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
      </tr>
      <tr>
        <td><b>Data 2</b>
        </td>
        <td colspan="3">Data 2</td>
      </tr>

      <th colspan="4" class="center">Data 3</th>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

我认为这是我的jquery的一个问题，但我不确定出了什么问题。当你将鼠标悬停在桌面上时，我还希望有一些桌面可以扩展，我还需要删除<thead> 和<tbody>标签我使用了这个：

 $('.header').hover(function(){
        $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
    }); 

但是当我离开标题区域并且表格会崩溃时它会出现问题，所以如果鼠标离开标题，我就无法使用扩展的表格区域。 知道我做错了吗？

Answer 1

这就是你想要的吗

＆＃13;

＆＃13;

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

 /*$('.header').click(function() {
   $(this).toggleClass('expand');
   $(this).parent().parent().find('tbody tr').toggle();
 });*/

$('.header').mouseenter(function(){ 
  $(this).toggleClass('expand'); 
  $(this).parent().parent().find('tbody tr').slideToggle(100); 
});
$('table').mouseleave(function(){   
  $(this).find('.header').toggleClass('expand'); 
  $(this).find('tbody tr').slideToggle(100);

});

＆＃13;

table,
tr,
td,
th {
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}
.header .sign:after {
  content: "\2B9D";
  display: inline-block;
  transition: transform 0.3s;
  transform: rotate(0deg);
}
.header.expand .sign:after {
  /*content:"\2B9F";*/
  transition: transform 0.3s;
  transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class='testclass'>
  <table>
    <thead>
      <tr class="header expand">
        <th colspan="8"><a style='text-decoration:none;'>Test Table <span class="sign"></span></a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
      </tr>
      <tr>
        <td><b>Data 2</b>
        </td>
        <td colspan="3">Data 2</td>
      </tr>

      <th colspan="4" class="center">Data 3</th>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;