table

最新推荐文章于 2022-09-17 17:40:45 发布

你好hmm

最新推荐文章于 2022-09-17 17:40:45 发布

阅读量397

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u013921901/article/details/23797557

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table{
	border:#3FF 1px solid;
	width:60%;
}
table th{
	border:#3FF 1px solid;
	background-color:#390;
}
table td{
	border:#3FF 1px solid;
}
.a{
	background-color:#F90;
}
.b{
	background-color:#6F9;
}
.c{
	background-color:#00F;
}
</style>

<script type="text/javascript">

var name;
function bcolor()
{
	var tabNode = document.getElementsByTagName("table")[0];
	//alert(tabNode.tagName);
	var trsNode = tabNode.rows
	for(var x=1;x<trsNode.length-1;x++)
	{
		if(x%2==1)
			trsNode[x].className = "a";
		else
			trsNode[x].className = "b";
		trsNode[x].onmouseover = function()
		{
			name = this.className;
			this.className = "c";
		};
		
		trsNode[x].onmouseout = function()
		{
			this.className = name;
		};
	}
}

function allCheck(x)
{
	var allcheck = document.getElementsByName("all")[x];
	//alert(tabNode.tagName);
	var mails = document.getElementsByName("mail");
	for(var j=0;j<mails.length;j++)
	{
		mails[j].checked = allcheck.checked
	}
	
}

function onCheck(index)
{
	var mails = document.getElementsByName("mail");
	for(var j=0;j<mails.length;j++)
	{
		if(index>1)
		{
			mails[j].checked = !mails[j].checked
		}
		else
		{
			mails[j].checked = index;
		}
		
	}
}

function delMail()
{
	
	if(confirm("你确定要删除所选的邮件吗?"))
	{
		var mails = document.getElementsByName("mail");
		var arr = new Array();
		var pos = 0;
		for(var j=0;j<mails.length;j++)
		{
			//alert(arr.length+"..."+arr[x].tagName);
			if(mails[j].checked)
			{
				var Node = mails[j].parentNode.parentNode;
				arr[pos++] = Node;
			}
			
		}
		for(var x=0;x<arr.length;x++)
		{
			var Node = arr[x];
			Node.parentNode.removeChild(Node);
		}
		bcolor();
	}

}


window.onload = function()
{
	bcolor();
}
</script>
</head>

<body>
<table>
 <tr>
  <th><input type="checkbox"  οnchange="allCheck(0)"  name="all"/>全选</th>
  <th>发件人</th>
  <th>邮件内容</th>
 </tr>
 
 <tr>
 <td><input type="checkbox"  name="mail"/></td>
 <td>张三11</td>
 <td>新的邮件</td>
 </tr>
 
  <tr>
 <td><input type="checkbox" name="mail"/></td>
 <td>张三22</td>
 <td>新的邮件</td>
 </tr>


 <tr>
 <td><input type="checkbox" name="mail"/></td>
 <td>张三33</td>
 <td>新的邮件</td>
 </tr>

 <tr>
 <td><input type="checkbox" name="mail"/></td>
 <td>张三44</td>
 <td>新的邮件</td>
 </tr>

 <tr>
 <td><input type="checkbox" name="mail"/></td>
 <td>张三55</td>
 <td>新的邮件</td>
 </tr>

 <tr>
 <td><input type="checkbox" name="mail"/></td>
 <td>张三66</td>
 <td>新的邮件</td>
 </tr>

 
 <tr>
  <th><input type="checkbox"  οnchange="allCheck(1)" name="all"/>全选</th>
  <th colspan="2">
   <input type="button" οnclick="onCheck(1)" value="全选" />
   <input type="button" οnclick="onCheck(0)" value="取消全选" />
   <input type="button" οnclick="onCheck(2)" value="反选" />
   <input type="button" οnclick="delMail()" value="删除所选邮件" />
  </th>
 </tr>
</table>
</body>
</html>

你好hmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table

无标题文档table{ border:#3FF 1px solid; width:60%;}table th{ border:#3FF 1px solid; background-color:#390;}table td{ border:#3FF 1px solid;}.a{ background-color:#F90;}.b{ background-color:
复制链接

扫一扫

专栏目录