复选框选中删除行（DOM练习）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.show2{
width:400px;
height:200px;
overflow:hidden;
}
span{
margin:0px;
display:none;
}
.show img{
display:none;
}
.show{
display:none;
}
</style>
</head>
<body>
<div class="show" id="show1">
<img src="data:images/1.jpg">
<img src="data:images/2.jpg">
</div>
<div class="show2" id="show1">
<img src="" id="two">
</div>
<button id="btn1">上</button>
<button id="btn">下</button>
<script>
function $(id){
return document.getElementById(id);
}
var btn=$("btn");
var btn1=$("btn1");
var two=$("two");
var show1=$("show1");
var imgs=show1.getElementsByTagName("img");
two.src=imgs[0].src;
var i=1;
btn.onclick=function(){
if(i<imgs.length){
two.src=imgs[i].src;
i++;
}
else{
two.src=imgs[imgs.length-1].src;
}
}
var j=1;
btn1.onclick=function(){
if(j>=0){
two.src=imgs[j].src;
j--;
}
else{
two.src=imgs[0].src;
}
}

</script>
</body>
</html>

巴特西

复选框选中删除行（DOM练习）

最新文章

热门文章