批量删除处理上次的全选事件
<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>
时间： 2025-01-02 11:24:32