IDEA激活码
这个示例非常好，用到了很多知识点。。。。
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table{
/*
设置表格的边框线颜色，宽度，线型
设置表格的宽度
设置表格的边框合并
*/
border: pink 1px solid;
width: 500px;
border-collapse: collapse;
}
table th{
/*
设置表格的表头单元格的颜色，宽度，线型
设置单元格的内边距
*/
border: blue 1px solid;
padding: 5px;
background-color: yellowgreen;
}
table td{
/*
设置表格的单元格的颜色，宽度，线型
设置单元格的内边距
*/
border: blue 1px solid;
padding: 5px;
}
.one{
background-color: bisque;
}
.two {
background-color: plum;
}
.over{
background-color: yellow;
}
</style>
<script type="text/javascript">
var name;
//行颜色间隔显示功能
function trColor() {
//获取表格对象
var tableNode = document.getElementById("tableid");
//获取行对象
var trNodes = tableNode.rows;
//遍历行对象
for (var i=0;i<trNodes.length;i++){
if(i%2==1){
trNodes[i].className="one";
}else{
trNodes[i].className="two";
}
//设置两个鼠标点击事件
trNodes[i].onmouseover=function(){
name=this.className;
this.className="over";
}
trNodes[i].onmouseout=function(){
this.className=name;
}
}
}
//调用函数
onload=function () {
trColor();
}
//复选框的全选动作
function checkAll(node){
//获取所有的复选框
var mailNodes = document.getElementsByName("mail");
//将全选的checked状态赋值给每个checkedbox的checked状态
for(var i=0;i<mailNodes.length;i++){
mailNodes[i].checked = node.checked;
}
}
//定义操作复选框按钮的方法
function checkAllByButton(number) {
//获取所有的复选框
var mailNodes = document.getElementsByName("mail");
for(var i=0;i<mailNodes.length;i++){
if(number<0){
// if(mailNodes[i].checked){
// mailNodes[i].checked=false;
// }else{
// mailNodes[i].checked=true;
// }
mailNodes[i].checked=!mailNodes[i].checked;
}else if(number>0){
//number=1代表true
mailNodes[i].checked = number;
}else{
//number=0代表false
mailNodes[i].checked = number;
}
}
}
//删除所选邮件
function delMail() {
if(!confirm("真的要删除所选的邮件吗？"))
{
return;
}
//获取所有mail复选框
var mailNodes = document.getElementsByName("mail");
//遍历
for(var i=0;i<mailNodes.length;i++){
if(mailNodes[i].checked){
//想要删除指定行，先获取到这一行,获取tr节点
var trNode = mailNodes[i].parentNode.parentNode;
//使用tr节点的父节点，删除tr节点
trNode.parentNode.removeChild(trNode);
i--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="tableid">
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)">全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件附属信息</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三1</td>
<td>我是邮件1</td>
<td>我是附属邮件11</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>李四2</td>
<td>我是邮件2</td>
<td>我是附属邮件22</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>王五3</td>
<td>我是邮件3</td>
<td>我是附属邮件33</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>赵六4</td>
<td>我是邮件4</td>
<td>我是附属邮件44</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>二麻5</td>
<td>我是邮件5</td>
<td>我是附属邮件55</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>三棱6</td>
<td>我是邮件6</td>
<td>我是附属邮件66</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>半吊7</td>
<td>我是邮件7</td>
<td>我是附属邮件77</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>嘿嘿8</td>8</td>
<td>我是邮件8</td>
<td>我是附属邮件88</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>哈哈9</td>
<td>我是邮件9</td>
<td>我是附属邮件99</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>半吊10</td>
<td>我是邮件10</td>
<td>我是附属邮件10</td>
</tr>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)"></th>
<th colspan="3">
<input type="button" value="全选" onclick="checkAllByButton(1)">
<input type="button" value="取消全选" onclick="checkAllByButton(0)">
<input type="button" value="反选" onclick="checkAllByButton(-1)">
<input type="button" value="删除所选邮件" onclick="delMail();">
</th>
</tr>
</table>
</body>
</html>
