本帖最后由 秦兰之 于 2013-6-8 10:06 编辑
<title>无标题文档</title>
<style type="text/css">
table,table th, table td{
border:#0066FF 1px solid;
width:600px;
}
table th{
background-color:#99FF00;
}
table td{
text-align:center;
}
.one{
background-color:#00FFCC;
}
.two{
background-color:#FC6;
}
.over{
background-color:#0C9;
}
</style>
<script type="text/javascript">
var name;
function trColor()
{
var tabNode=document.getElementById("mailid");
var trs=tabNode.rows;
for(var x=0; x<trs.length-1; x++)
{
if(x%2==1){
trs[x].className="one";
}
else
{
trs[x].className="two";
}
//鼠标悬停的时候要先进入原来的样式，紧跟着再设置新的样式；就要定义一个变量。
trs[x].onmouseover=function()
{
name=this.className;
this.className="over";
}
trs[x].onmouseout=function()
{
name=this.className;
}
}
}
window.onload=function() //匿名加载事件。
{
trColor();
}
//定义checkbox的全选动作。
function checkAll(index) //将方法中的值作为参数传递进来。
{
var boxNode=document.getElementsByName("all")[index]; //获取复选框节点对象的索引值。
var mailNodes=document.getElementsByName("mail"); //获取单元格中复选框的节点对象。
for(var x=0; x<mailNodes.length; x++)
{
mailNodes[x].checked=boxNode.checked; //?
}
}
//定义按钮的选取效果。
function checkByBut(num)
{
var mailNodes=document.getElementsByName("mail"); //获取单元格中复选框的节点对象。
for(var x=0; x<mailNodes.length; x++)
{
if(num==2)
mailNodes[x].checked=!mailNodes[x].checked;
else
mailNodes[x].checked=num;
/*
if(num===1)
mailNodes[x].checked=true;
else if(num===0)
mailNodes[x].checked=false;
else
mailNodes[x].checked=!mailNodes[x].checked;
*/
}
}
//删除所选邮件。
function deleteMail()
{
if(confirm("你真的要删除所选邮件吗？"))
{
var mailNodes=document.getElementsByName("mail"); //获取单元格中复选框的节点对象。
var arr=[]; //定义一个数组和指针，存储被选中的节点对象。
var pos=0;
for(var x=0; x<mailNodes.length; x++)
{
if(mailNodes[x].checked)//?
{
var trNode=mailNodes[x].parentNode.parentNode;//? 无法获取属性“parentNode”的值: 对象为 null 或未定义
//alert(mailNodes[x].parentNode.nodeName);
//trNode.removeChild(true);
arr[pos++]=trNode;
}
}
//alert(arr.length); //获取要删除的行对象的长度。
for(var x=0; x<arr.length; x++) //遍历选中的节点对象数组。
{
arr[x].removeNode(true);
}
trColor(); //删除后的节点对象还是使用行间隔样式效果。
}
}
</script>
</head>
<body>
<table id="mailid">
<th><input type="checkbox" name="all" />全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件附属信息</th>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三11</td>
<td>我是邮件11</td>
<td>我是附属信息11</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三12</td>
<td>我是邮件12</td>
<td>我是附属信息12</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三13</td>
<td>我是邮件13</td>
<td>我是附属信息13</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三14</td>
<td>我是邮件14</td>
<td>我是附属信息14</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三15</td>
<td>我是邮件15</td>
<td>我是附属信息15</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三16</td>
<td>我是邮件16</td>
<td>我是附属信息16</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三17</td>
<td>我是邮件17</td>
<td>我是附属信息17</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三18</td>
<td>我是邮件18</td>
<td>我是附属信息18</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三19</td>
<td>我是邮件19</td>
<td>我是附属信息19</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三b111</td>
<td>我是邮件b111</td>
<td>我是附属信息b111</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三b2</td>
<td>我是邮件b2</td>
<td>我是附属信息b2</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三a1</td>
<td>我是邮件a1</td>
<td>我是附属信息a1</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三a2</td>
<td>我是邮件a2</td>
<td>我是附属信息a2</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三a3</td>
<td>我是邮件a3</td>
<td>我是附属信息a3</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三a4</td>
<td>我是邮件a4</td>
<td>我是附属信息a4</td>
</tr>
<th><input type="checkbox"/>全选<!--checkAll(1)-->
</th>
<th colspan="3">
<input type="button" value="全选" />
<input type="button" value="取消全选" />
<input type="button" value="反选" />
<input type="button" value="删除所选附件" />
</th>
</table>
</body>
</html> |
收藏
淘帖
踩
