关于DOM节点问题

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mail</title>
<style>
table,table td,table th{
border: green 1px solid;
}
table th{
background-color: blue;
}
table{
width: 60%;
}
.one{
background-color: green;
}
.two{
background-color: yellow;
}
</style>
<script type="text/javascript">
function trColor(){
var tabNode=document.getElementById("mailid");
var trs=tabNode.rows;
for(var i=1;i<trs.length-1;i++){
if(i%2==0){
trs[i].className="one";
}else{
trs[i].className="two";
}
}
}
window.onload=function(){
trColor();
}function selectAll(index){
var checkmails=document.getElementsByName("mail");
var allmails=document.getElementsByName("allmails");
for(var i=0;i<checkmails.length;i++){
checkmails[i].checked=allmails[index].checked;
}
}function selectByBt(types){
var checkmails=document.getElementsByName("mail");
if(types=="all"){
for(var i=0;i<checkmails.length;i++){
checkmails[i].checked=true;
}
}else if(types=="no"){
for(var i=0;i<checkmails.length;i++){
checkmails[i].checked=false;
}
}else if(types=="all-no"){
for(var i=0;i<checkmails.length;i++){
checkmails[i].checked=!checkmails[i].checked;
}
}}var trNodes=new Array();
var x=0;
function del(){

var mails=document.getElementsByName("mail");
for(var i=0;i<mails.length;i++){
if(mails[i].checked){
trNodes.push(mails[i].parentNode.parentNode);
}
}
//=============================================
for(var i=0;i<trNodes.length;i++){

trNodes[i].parentNode.removeChild(trNodes[i]);      //问题区

}
trNodes.length=0;
//==============================================
trColor();
}
</script>
</head>
<body>
<table id="mailid">
<tr>
<th><input type="checkbox" name="allmails" onclick="selectAll(0)"/>全选</th>
<th>发件人</th>
<th>邮件名称</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三1</td>
<td>新的邮件1</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三2</td>
<td>新的邮件2</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三3</td>
<td>新的邮件3</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三4</td>
<td>新的邮件4</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三5</td>
<td>新的邮件5</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三6</td>
<td>新的邮件6</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三7</td>
<td>新的邮件7</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三8</td>
<td>新的邮件8</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三9</td>
<td>新的邮件9</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三10</td>
<td>新的邮件10</td>
</tr>
<tr>
<th><input type="checkbox" name="allmails" onclick="selectAll(1)"/>全选</th>
<th colspan="2"><input type="button" value="全选" onclick="selectByBt('all')"/><input type="button" value="取消全选" onclick="selectByBt('no')"/><input type="button" value="反选" onclick="selectByBt('all-no')"/><input type="button" value="删除所选邮件" onclick="del()"/></th>
</tr>
</table>
</body>
</html>
function del(){

var mails=document.getElementsByName("mail");
for(var i=0;i<mails.length;i++){
if(mails[i].checked){
trNodes.push(mails[i].parentNode.parentNode);
}
}
//=============================================
for(var i=0;i<trNodes.length;i++){

trNodes[i].parentNode.removeChild(trNodes[i]);      //问题区

}
trNodes.length=0;
//==============================================
trColor();
}把这个方法复制上去就可以了
OK,明白，明吧，thank you !

调试易

关于DOM节点问题

解决方案 »