Javascript 单击AD时隐藏/显示动态创建的表体

正如您运行代码后看到的，我有多个表，假设它们是用PHP动态创建的。如果单击表的

thead

，我会尝试隐藏/显示整个

tbody

我可以只给每个表它自己的id，然后为每个表编写jquery代码。。。但是由于表是动态创建的，所以我不能这样解决它

当前版本的jquery脚本会在我单击thead时切换所有tbody，而不仅仅是我实际单击的表的thead

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

我想到了这样的事情：

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

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

var main=function（）
{
$toggle=true；
$（“thead”）。单击
(
函数（）
{
如果（$toggle）
{
$toggle=false；
$（“tbody”）.css（“显示”、“无”）；
}
其他的
{
$toggle=true；
$（“tbody”）.css（“display”，即“）；
}
}
);
}
$（文件）.ready（主）
表格，td{
边框：1px纯黑；
}
运输署{
颜色：红色；
显示：块；
最大宽度：120px；
空白：nowrap；
溢出-x：自动；
背景颜色：蓝色；
}
th{
边框：1px纯黑；
}

第一桌
A.
B
C
第二桌
A.
B
C
尝试使用

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

首先，不要使用
$（'tbody'）
，而是使用
this

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


var main=function（）{
$（“thead”）。在（“单击”，函数（）上{
$（this.parents（“table”）.find（“tbody”）.toggle（）；
});
}
$（文件）.ready（主）
表格，
运输署{
边框：1px纯黑；
}
运输署{
颜色：红色；
显示：块；
最大宽度：120px；
空白：nowrap；
溢出-x：自动；
背景颜色：蓝色；
}
th{
边框：1px纯黑；
}

第一桌
A.
B
C
第二桌
A.
B
C
您可以使用.next（）

或者最好使用切换


和使用脚本
`在这里输入代码`
document.getElementById（“项”）.style.display=“块”；
更好地使用'，toggle（）；'而不是“css”（“display”，“none”）；”所显示的代码毫无意义，因为您或作者的代码中没有ID为
total item
的元素，代码段中没有切换功能，并且您在脚本块中留下了占位符文本，这将导致脚本错误。当你在一个代码块中混合文本和代码时，在写答案的时候也应该更加小心，最好看一看。
$(this).next("tbody").css("display","none");

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

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