<html>
<head>
<title>表格删除效果</title>
<script type="text/javascript">
function checkallstu(cankao){
var ck =cankao.checked;
var list = document.getElementsByName("chestu");
for(var i=0;i<list.length;i++){
var mycheck = list[i];
mycheck.checked = ck;
}
}
window.onload = function(){
var trs = document.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
var mytr = trs[i];//获取所有tr;
var oldcolor ;//设置鼠标悬浮时颜色;
mytr.onmouseovet = function(){
oldcolor = this.style.backround;//原色以网页背景色为样;
this.style.backround ="#f1f1f1";
}
mytr.onmouseout =function(){//恢复原色;
this.style.backround = oldcolor;
}
//实现单行删除;
var nylinks = document.getElementByTagName('a');
for(var i =0;i<nylinks;i++){
var myaa = nylinks[i];
myaa.onclick = function(){
var delnode = this.parentNode.parentNode;
var pnode = delnde.parentNode;
pnode.removeChild(delnode);
}
}
}
//批量删除
function deleteall(){
var checllist = document.getElementsByTagName('chestu');
for(var i=checllist.length-1;i>=0;i++){
var machk = chelist[i];
if(mychk.checked ==true){
deltr = mychk.paretNote.paretNote;
pnode = delnde.parentNode;
pnode.removeChild(deltr);
}
}
}
</script>
<style type="text/css">
input[type=button]{
margon-left:100px;
}
</style>
〈/head〉
<body>
<table border="1" widht="300px">
〈tr〉
<td><input type="checkbox" id="checkall" οnclick="checkallstu(this)" /> 全选</td>
<td> 姓名〈/td〉
<td> 性别</td>
<td> 年龄</td>
<td> <a href ="#" >删除〈/a〉</td>
</tr>
〈tr〉
<td><input type="checkbox" name="chestu" /> </td>
<td> 张三〈/td〉
<td> 男</td>
<td> 18</td>
<td> <a href ="#" >删除〈/a〉</td>
</tr>
〈tr〉
<td><input type="checkbox" name="chestu" /> </td>
<td> 李四〈/td〉
<td> 男</td>
<td> 20</td>
<td> <a href ="#" >删除〈/a〉</td>
</tr>
〈tr〉
<td><input type="checkbox" name="chestu" /> </td>
<td> 宁采臣〈/td〉
<td> 男</td>
<td> 19</td>
<td> <a href ="#" >删除〈/a〉</td>
</tr>
〈tr〉
<td><input type="checkbox" name="chestu" /> </td>
<td> 聂小倩〈/td〉
<td> 女</td>
<td> 18</td>
<td> <a href ="#" >删除〈/a〉</td>
</tr>
〈/table〉
<input type="button" value="批量删除" οnclick="deleteall()" />
</body>
</html>
感受。整篇代码打下来 会出现一个4×5的表格 当鼠标移到单元格上时有光柱效果 出现，并且可以实现单行删除 ，跟选中若干后进行批量删除， 单击全选双击取消 全选，又一次体现了js的 神奇之处。
6030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
