批量删除处理上次的全选事件
<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>