如何运用JS代码实现删除页面所显示内容,下面博主写了一份代码,有兴趣的可以按照我的代码打一遍哦,会出现很神奇的效果的,既可以单行删除也可以全选删除的。(博主用的Sublime Text3这个软件,DW跟这个类似的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<style type="text/css">
table{
margin: 0 auto;
border-collapse: collapse;
}
fieldset{
padding-left: 450px;
margin-top: 12px;
}
.lurn{
padding-top: 12px;
}
#anniu {
margin: 0 auto;
margin-top: 5px;
margin-left: 450px;
}
tr {
border-collapse: collapse;
}
</style>
<script type="text/javascript">
window.onload=function(){
//颜色变化
var trlist=document.getElementsByTagName('tr');
for(var i=0;i<trlist.length;i++){
var mytr=trlist[i];
var oldbgcolor="#6F6";
mytr.onmouseover=function(){
oldbgcolor=this.style.background;
this.style.background="#FCF";
}
mytr.onmouseout=function(){
this.style.background=oldbgcolor;
}
}
//获取页面所有的删除a链接
var linklist=document.getElementsByTagName('a');
for(var i=0;i<linklist.length;i++){
//获取第i个a
var mylink=linklist[i];
//动态绑定事件
mylink.onclick=function(){
//父节点.removeChild(被删除的子节点)
//this--a
//this.parentNode==td
//this.prentNode.parentNode====tr
var delnode=this.parentNode.parentNode;
var pnode=delnode.parentNode;
pnode.removeChild(delnode);
}
}
var trs=document.getElementsByTagName('tr');
}
//全选或全不选
function checkall(chk){
var ischick=chk.checked;
var list=document.getElementsByName('chkstu');
for (var i = 0; i<list.length;i++) {
var mychk=list[i];
mychk.checked=ischick;
}
}
</script>
</head>
<body>
<table border="1px" width="450px" height="245" >
<tr>
<td><input type="checkbox" onclick="checkall(this)" name="chkstu" />
全选</td>
<td>姓名:</td>
<td>年龄:</td>
<td>性别:</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu"/></td>
<td>小新</td>
<td>10</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu" /></td>
<td>小李</td>
<td>14</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu" /></td>
<td>小丽</td>
<td>16</td>
<td>女</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu" /></td>
<td>小虎牙</td>
<td>14</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
</table>
<input type="button" value="删除" onclick="delsel()" id="anniu"/>
<script type="text/javascript">
function delsel(){
var chklist=document.getElementsByName('chkstu');
for(var i=chklist.length-1;i>=0;i--){
if(chklist[i].checked==true){//删除
tr=chklist[i].parentNode.parentNode;
pnode=tr.parentNode;
pnode.removeChild(tr);
}
}
}
</script>
</body>
</html>