Question

I want to show only one tbody content at a time when a user clicks on a table header

I have four tables in a html document which shows the content of first table by default when a user clicks on another title the original tbody> content remains open until a user click that header I'm struggling to find a solution so that when a user click on a new header only the content of that header is shown

Here is my html and jquery code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Accordion table</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  $(function() {
  $("tbody:not(.first)").hide();
  $("table thead tr th").click(function(){
  $(this).parents('table') .children('tbody').fadeToggle("fast");
    });
  });
</script>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">President</th>
    </tr>
  </thead>
  <tbody class="first">
    <tr>
      <td>Archdeacon  Bathurst</td>
      <td>1882 &#8211; 1910</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1910 &#8211; 1929</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Vice President</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anthony H Smith</td>
      <td>1988 &#8211; 1991</td>
    </tr>
    <tr>
      <td>John R Pemble</td>
      <td>1991 &#8211; 1994</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Secretary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr C Hertbert</td>
      <td>1882 &#8211; 1887</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1887 &#8211; 1895</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Treasurer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr T G Elger</td>
      <td>1882 &#8211; 1895</td>
    </tr>
    <tr>
      <td>Mr T Bull</td>
      <td>1895 &#8211; 1907</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 1

您需要在显示当前项目后隐藏所有其他tbody元素

$(function() {
  $("tbody:not(.first)").hide();
  $("table thead tr th").click(function() {
    var $tbody = $(this).closest('table').children('tbody').fadeToggle("fast");
    $("tbody").not($tbody).fadeOut('fast');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">President</th>
    </tr>
  </thead>
  <tbody class="first">
    <tr>
      <td>Archdeacon Bathurst</td>
      <td>1882 &#8211; 1910</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1910 &#8211; 1929</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Vice President</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anthony H Smith</td>
      <td>1988 &#8211; 1991</td>
    </tr>
    <tr>
      <td>John R Pemble</td>
      <td>1991 &#8211; 1994</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Secretary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr C Hertbert</td>
      <td>1882 &#8211; 1887</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1887 &#8211; 1895</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Treasurer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr T G Elger</td>
      <td>1882 &#8211; 1895</td>
    </tr>
    <tr>
      <td>Mr T Bull</td>
      <td>1895 &#8211; 1907</td>
    </tr>
  </tbody>
</table>

Answer 2

这应该有效：

  $(function() {
    $("tbody:not(.first)").hide();
    $("table thead tr th").click(function() {
      $("tbody").hide();
      $(this).parents('table').children('tbody').fadeToggle("fast");
    });
  });

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Accordion table</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">President</th>
      </tr>
    </thead>
    <tbody class="first">
      <tr>
        <td>Archdeacon Bathurst</td>
        <td>1882 &#8211; 1910</td>
      </tr>
      <tr>
        <td>Rev W W C Baker</td>
        <td>1910 &#8211; 1929</td>
      </tr>
    </tbody>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">Vice President</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Anthony H Smith</td>
        <td>1988 &#8211; 1991</td>
      </tr>
      <tr>
        <td>John R Pemble</td>
        <td>1991 &#8211; 1994</td>
      </tr>
    </tbody>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">Honorary Secretary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mr C Hertbert</td>
        <td>1882 &#8211; 1887</td>
      </tr>
      <tr>
        <td>Rev W W C Baker</td>
        <td>1887 &#8211; 1895</td>
      </tr>
    </tbody>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">Honorary Treasurer</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mr T G Elger</td>
        <td>1882 &#8211; 1895</td>
      </tr>
      <tr>
        <td>Mr T Bull</td>
        <td>1895 &#8211; 1907</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Jquery accordion html table showing one content at a time

2 个答案: