求JS隐藏与显示表格多条整列

求JS隐藏与显示表格多条整列,第1张

我默认你用的不是古代的浏览器,代码都按现代浏览器的写

let isHidden = false;
documentquerySelector("button")addEventListener("click", () => {
    //css选择器选择table下所有tr下的所有第2,3个td。
    documentquerySelectorAll("table tr td:nth-child(2), table tr td:nth-child(3)")forEach(item => {
        estylevisibility = isHidden  "visible" : "hidden";
        isHidden = !isHidden;
    });
}, false);

建议使用jquery插件。方法很简单。

$("td")click(function(){
    $("div")toggle();
})

用原生的需要多写几行了

var td=documentquerySelector("td");
var div=documentquerySelector("div");
tdaddEventListener("click",toggle,false);
function toggle(){
   var isShow=divstyledisplay;
   divstyledisplay=isShow=="none""":"none";
}

:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来。
1 if(DIV是显示的){
2 divstyledisplay='none';
3 }
4 else{
5 divstyledisplay='block';
6 }
代码:
style:
1 <style>
2 #text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
3 #menu{display:none;width:300px;height:100px;border:solid 1px #CCC;}
4 </style>
js:
<script type="text/javascript">
windowonload=function(){
var wenzi=documentgetElementById('text');
var div=documentgetElementById('menu');
wenzionfocus=function(){
if(divstyledisplay=='block'){ // == 判断divdisplay是否为显示
divstyledisplay='none'; //= 赋值也可了解成改变
}
else{
divstyledisplay='block';
}
}
};
</script>
html
<span id="text">点击显示菜单,再点击隐藏菜单</span>
<div id="menu">这是文字哦。</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13368663.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-23
下一篇 2023-07-23

发表评论

登录后才能评论

评论列表(0条)

保存