首页 > 代码库 > 原生DOM操作两个栗子，关于折叠内容和批量删除
原生DOM操作两个栗子，关于折叠内容和批量删除
批量删除处理上次的全选事件
<script>
var delete=document.getElementById("btn_delete"); delete.onclick=function() { var flag=window.confirm("你确定要删除吗？"); if(flag==true) { var selNum = document.querySelectorAll("input.checkinfo[type=‘checkbox‘]"); for(var i=selNum.length-1; i>=0;i--) { if(selNum[i].checked == true) { var td=selNum[i].parentNode; var tr=td.parentNode; var trs=tr.parentNode; trs.removeChild(tr); } } } }}
</script>
折叠与展开内容
第一种是菜单栏与子菜单，主要是div设置display属性
<table> <tr> <td> <div class="up" onclick=show("a0")><a href="#">菜单一</a></div> <div onmouseover=high() onmouseout=low() id="a0" style="display:none"> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> </div> </td> </tr> <tr> <td> <div class="up" onclick=show("a1")><a href="#">菜单二</a></div> <div onmouseover=high() onmouseout=low() id="a1" style="display:none"> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> <li class="innerClass">子菜单</li> </div> </td> </tr> </table> <script>function show(div){ if(document.all(div).style.display==‘none‘) { document.all(div).style.display=‘block‘; } else { document.all(div).style.display=‘none‘; } }function high() {if (event.srcElement.className=="innerClass") { event.srcElement.style.background="gray"; event.srcElement.style.color="red"; }}function low(){if (event.srcElement.className=="innerClass"){ event.srcElement.style.background="#C4BCB7" event.srcElement.style.color="green" }} </script>
第二种情况是菜单项里嵌套一系列子菜单，如果按照前一种方式就会很麻烦了，在所有父菜单都要绑定事件，所以用DOM节点操作就很省事啦，（元素匹配的是加减图标）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { list-style: none;} ul a { text-decoration: none; color: #333333; padding: 0px ; background-color: #919AB0; background: no-repeat 0 2px; } ul a:hover { color:white; text-decoration: none; background-color: #919AB0; background-position: 5px 100%;} </style></head><body> <ul> <li> <img src="images/bt1.png" ><span class="Fliat"> <a href="#">父菜单</a></span> <ul> <li><img src="images/bt1.png"> <span><a href="#">子菜单</a></span> <ul> <li><a href="#">孙菜单</a></li> <li><a href="#">孙菜单</a></li> <li><a href="#">孙菜单</a></li> <li><a href="">孙菜单</a></li> <li><a href="">孙菜单</a></li> </ul> </li> <li>子菜单</li> </ul> </li> </ul> <script>document.onclick=function(evt){ var target=evt.target; if(target.matches("ul li img")) { var node=target.nextElementSibling.nextElementSibling; var display=node.style.display; if(display=="none"){ node.style.display="block"; target.setAttribute("src","images/bt1.png"); } else{ node.style.display="none"; target.setAttribute("src","images/bt2.png"); } } } </script></body></html>
原生DOM操作两个栗子，关于折叠内容和批量删除
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。