頁面
可以實現編號驗證、添加員工、隔行變色、全選、單行刪除和多行刪除操作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#empAdd {
width: 600px;
margin: 10px auto;
padding: 10px 0px;
text-align: center;
}
#empAdd fieldset {
height: 100px;
}
.btn {
margin-top: 5px;
width: 60px;
}
.container {
margin: 20px auto;
width: 500px;
text-align: center;
}
table {
width: 500px;
}
table, th, td {
border: 1px solid #000000;
border-collapse: collapse;
}
</style>
<script>
// 添加員工
function empAdd(){
//員工編號
var empId=document.getElementById("txtId").value;
// 員工姓名
var empName=document.getElementById("txtName").value;
// 員工職位
var empJob=document.getElementById("txtJob").value;
var emp=new Object();
emp.empId=empId;
emp.empName=empName;
emp.empJob=empJob;
empMessage(emp);
}
// 動態添加元素
function empMessage(emp){
// 添加一行信息
var td_select=document.createElement("td");
// 複選框
var checkbox=document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("name","select");
td_select.appendChild(checkbox);
// 員工編號
var td_Id=document.createElement("td");
var txtId=document.createTextNode(emp.empId);
td_Id.appendChild(txtId);
// 員工姓名
var td_Name=document.createElement("td");
var txtName=document.createTextNode(emp.empName);
td_Name.appendChild(txtName);
// 員工職位
var td_Job=document.createElement("td");
var txtJob=document.createTextNode(emp.empJob);
td_Job.appendChild(txtJob);
// 刪除按鈕
var td_Del=document.createElement("td");
var btnDel=document.createElement("input");
btnDel.setAttribute("type","button");
btnDel.setAttribute("value","刪除");
btnDel.setAttribute("onclick","removeTr(this);");
td_Del.appendChild(btnDel);
// 創建一行存儲員工信息
var tr=document.createElement("tr");
var tbody=document.getElementById("tbContent");
// 將每一個td添加到tr中
tr.appendChild(td_select);
tr.appendChild(td_Id);
tr.appendChild(td_Name);
tr.appendChild(td_Job);
tr.appendChild(td_Del);
// 將一行信息添加到tbody中
tbody.appendChild(tr);
// 實現隔行變色
var items=document.getElementsByTagName("tbody")[0].children;
for (var i = 0; i < items.length; i++) {
if(i%2==0){
items[i].style.backgroundColor="gray";
}else{
items[i].style.backgroundColor="lightyellow";
}
}
}
// 刪除某一行信息
function removeTr(obj){
// 獲取刪除所在的行
var trNode=obj.parentNode.parentNode;//tr
var tbody=document.getElementById("tbody");
var txtName=trNode.getElementsByTagName("td")[2].firstChild.nodeValue;
if(confirm("確定要刪除"+txtName+"的信息嗎?")){
// 刪除某一行
//tbody.removeChild(trNode);
trNode.parentNode.removeChild(trNode);
}
}
// 實現全選
function selectAll(){
var all=document.getElementById("all");
var items=document.getElementsByName("select");
for (var i = 0; i < items.length; i++) {
items[i].checked=all.checked;
}
}
// 刪除員工信息
function deleteEmp(){
var checkbox = document.getElementsByName("select");
var count=0;// 存放被選中的數量
var arr = new Array();//存放被選中的行
for (var i = 0; i < checkbox.length; i++) {
// 判斷被選中的項
if(checkbox[i].checked){
count++;
var element=checkbox[i].parentNode.parentNode;//tr
// 將被選中的行信息添加到數組中
arr.push(element);
}
}
if(count==0){
alert("請至少選中一項！！");
}else{
if(confirm("確定要刪除嗎?")){
var tbody=document.getElementById("tbContent");
// 執行刪除操作
for(index in arr){
tbody.removeChild(arr[index]);
}
}
}
}
</script>
</head>
<body>
<div id="empAdd">
<fieldset>
<legend><strong>添加員工</strong></legend>
<label>編號:</label>
<input type="text" size="15" id="txtId" name="empNo" value="" maxlength="4"
autofocus="autofocus" placeholder="請輸入員工編號"/>
<label>姓名:</label>
<input type="text" size="15" id="txtName" name="empName" value=""
maxlength="20" placeholder="請輸入姓名"/>
<label>職位:</label>
<select id="txtJob">
<option value="0" selected="selected">請選擇</option>
<option value="程序員">程序員</option>
<option value="設計師">設計師</option>
<option value="項目經理">項目經理</option>
</select>
<br /><br />
<div>
<input type="submit" name="name" id="btnAdd" value="添加" onclick="empAdd();" />
<input type="reset" class="btn" id="btnReset" value="重置" />
</div>
</fieldset>
</div>
<div class="container">
<h1>員工管理</h1>
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" onchange="selectAll();" id="all" />全選</th>
<th>編號</th>
<th>姓名</th>
<th>職位</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbContent">
</tbody>
</table>
<p id="empty">
</p>
<input type="button" name="name" id="btnDelete" onclick="deleteEmp();" value="刪除員工" />
<script>
</script>
</div>
</body>
</html>