Question

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

我可以为每个表提供它自己的id并为每个表编写jquery代码......但由于这些表是动态创建的，所以我无法像这样解决它。

如果我点击thead，我的jquery脚本的当前版本会切换所有tbody，而不是仅仅点击我实际点击的表格。

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

我想到了这样的事情：

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

因此它只选择我实际点击的thead的tbody。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

尝试

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

Answer 3

你可以使用.next（）https://api.jquery.com/next/

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

或更好地使用切换https://api.jquery.com/toggle/

$(this).next("tbody").toggle();

Answer 4

<table class="table" id="item"style="display:none;">
<tbody style="height:0px;width:82%; display:table;"></tbody>
                                    </table>

and using script

<script>`enter code here`
document.getElementById("item").style.display = "block";
</script>

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

4 个答案: