在thead上单击隐藏/显示动态创建的表格

Question

正如您在运行代码后所看到的,我有多个表,让我们假设它们是使用PHP动态创建的.tbody如果我点击它,我会尝试隐藏/显示整个表格thead.

我可以给每个表它自己的id并为每个表编写jquery代码......但由于这些表是动态创建的,所以我不能像这样解决它.

如果我点击thead,我的jquery脚本的当前版本切换所有tbody,而不是仅仅我实际点击的表格的那个.

我解决这个问题的唯一想法是动态创建jquery代码(但我不确定这是否真的有效),但在我尝试之前,有人知道是否有更简单的解决方案吗？

我想过这样的事情:

$("this tbody").css("display","none");

所以它只选择我实际点击的thead的tbody.

var main = function()
{
    $toggle = true;
  
    $("thead").click
    (
        function()
        {
            if ($toggle)
            {
                $toggle = false;
                $("tbody").css("display","none");
            }
            else
            {
                $toggle = true;
                $("tbody").css("display","");
            }
        }
    );

}
$(document).ready(main);

table, td {
  border: 1px solid black;
}

td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
  background-color: blue;
}

th {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
     <tr><th id="here1">First Table</th></tr>
 </thead>
 <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</tbody>
</table>

<table>
 <thead>
     <tr><th id="here1">Second Table</th></tr>
 </thead>
 <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</tbody>
</table>

Answer 1

首先,使用而不是$('tbody')使用this

其次,使用toggle函数而不是管理变量的可见性

var main = function() {
  $("thead").on("click", function() {
    $(this).parents("table").find("tbody").toggle();
  });

}
$(document).ready(main);

table,
td {
  border: 1px solid black;
}
td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
  background-color: blue;
}
th {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th id="here1">First Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th id="here1">Second Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
  </tbody>
</table>