<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css/table1.css" rel="stylesheet" type="text/css"/>
<script src="js/table1.js" type="text/javascript"></script>
</head>
<body>
<h1>员工信息列表</h1>
<table>
<tr>
<th><input type="checkbox" name="allcheckbox" onclick="javascript:checkboxAll();"/>全选</th>
<th>员工编号</th>
<th>员工名称</th>
<th>员工部门</th>
<th colspan="3">操作</th>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>1001</td>
<td>张三</td>
<td>财务部</td>
<td><a href="#" onclick="javascript:deleteConfirm();">删除</a></td>
<td><a href="#" onclick="javascript:updatePrompt();">修改</a></td>
<td><a href="#" onclick="javascript:findContent()">查看</a></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>1002</td>
<td>李四</td>
<td>产品部</td>
<td><a href="#" onclick="javascript:deleteConfirm();">删除</a></td>
<td><a href="#">修改</a></td>
<td><a href="#" onclick="javascript:updatePrompt();">查看</a></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>1002</td>
<td>王二</td>
<td>技术部</td>
<td><a href="#" onclick="javascript:deleteConfirm();">删除</a></td>
<td><a href="#">修改</a></td>
<td><a href="#" onclick="javascript:updatePrompt();">查看</a></td>
</tr>
</table>
<script>
function checkboxAll(){
var checkboxallArrays = document.getElementsByName("allcheckbox"); //获取name属性值为allcheckbox的html元素赋值给checkboxallArrays数组对象
var checkall = checkboxallArrays[0]; //获取数组第一个值
//判断全选框是否被选中,checkall.checked == true 表示选中，checkall.checked == false未选中
if(checkall.checked == true){
//选中处理
var checkboxArrays = document.getElementsByName("checkbox"); //获取name属性值为checkbox的html元素赋值给checkboxArrays数组对象
var length = checkboxArrays.length; //返回数组元素个数
//循环选中所有选项
for(var i = 0; i < length; i++){
checkboxArrays[i].checked = true;
}
}else{
//未选中处理
var checkboxArrays = document.getElementsByName("checkbox");
var length = checkboxArrays.length; //返回数组元素个数
for(var i = 0; i < length; i++){
checkboxArrays[i].checked = false;
}
}
}
</script>
</body>
</html>
网友评论