基於jquery-1.10.1的添加刪除員工的一個簡單的HTML界面 ...
最近在瞭解有關於jQuery的東西，學習一番之後做了一個簡單的添加刪除記錄的功能。
功能說明：
1. 點擊'Submit', 根據輸入的信息在表單中生成一行員工信息（包含正則驗證）
2. 點擊Delete鏈接, 提示刪除當前行信息, 點擊確定後刪除信息
3. 點擊'全選': 選中所有員工
4. 點擊'全不選': 取消選擇所有員工
5. 點擊'反選': 改變所有員工的勾選狀態
6. 點擊'刪除': 提示是否一鍵刪除，確認則全部刪除，取消則逐個刪除
7. 點擊'表頭覆選框': 選中所有員工, 或者全不選中
8. 點擊某個員工前的覆選框時,更新'表頭覆選框'的選中狀態
額外功能：
1. 被選中的員工的三欄信息用text-decoration設置刪除線
2. 滑鼠滑過的表單行背景顏色改為預設的顏色
3. 'submit'提交後原欄目內容清空
1 <!DOCTYPE html> 2 <html> 3 <!-- 基於jQuery的添加刪除記錄表格 --> 4 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>添加刪除記錄練習</title> 8 <style type="text/css" charset="utf-8"> 9 #total { 10 width: 450px; 11 margin-left: auto; 12 margin-right: auto; 13 } 14 15 ul { 16 list-style-type: none; 17 } 18 19 li { 20 border-style: solid; 21 border-width: 1px; 22 padding: 5px; 23 margin: 5px; 24 background-color: #99ff99; 25 float: left; 26 } 27 28 .inner { 29 width: 400px; 30 border-style: solid; 31 border-width: 1px; 32 margin: 10px; 33 padding: 10px; 34 float: left; 35 } 36 37 #employeeTable { 38 border-spacing: 1px; 39 margin: 80px auto 10px auto; 40 } 41 42 th { 43 background-color: white; 44 } 45 46 #formDiv, 47 .button{ 48 width: 250px; 49 border-style: solid; 50 border-width: 1px; 51 margin: 50px auto 10px auto; 52 padding: 10px; 53 } 54 55 #formDiv input { 56 width: 100%; 57 } 58 59 .word { 60 width: 40px; 61 } 62 63 .inp { 64 width: 200px; 65 } 66 #employeeTable, #employeeTable th, #employeeTable td{ 67 border: 1px solid; 68 border-spacing: 0; 69 70 } 71 </style> 72 </head> 73 <body> 74 75 <table id="employeeTable"> 76 <tr> 77 <th class="checkAllBox"><input type="checkbox" name="" id="checkedAllBox"></th> 78 <th>Name</th> 79 <th>Email</th> 80 <th>Salary</th> 81 <th> </th> 82 </tr> 83 <tr> 84 <td><input type="checkbox" name="items" id=""></td> 85 <td>Tom</td> 86 <td>[email protected]</td> 87 <td>5000</td> 88 <td><a href="deleteEmp?id=001">Delete</a></td> 89 </tr> 90 <tr> 91 <td><input type="checkbox" name="items" id=""></td> 92 <td>Jerry</td> 93 <td>[email protected]</td> 94 <td>8000</td> 95 <td><a href="deleteEmp?id=002">Delete</a></td> 96 </tr> 97 <tr> 98 <td><input type="checkbox" name="items" id=""></td> 99 <td>Bob</td> 100 <td>[email protected]</td> 101 <td>10000</td> 102 <td><a href="deleteEmp?id=003">Delete</a></td> 103 </tr> 104 </table> 105 106 <div class="button"> 107 <input type="button" id="checkedAllBtn" value="全 選" /> 108 <input type="button" id="checkedNoBtn" value="全不選" /> 109 <input type="button" id="checkedRevBtn" value="反 選" /> 110 <input type="button" id="sendBtn" value="刪 除" /> 111 </div> 112 113 114 <div id="formDiv"> 115 116 <h4>添加新員工</h4> 117 118 <table> 119 <tr> 120 <td class="word">name: </td> 121 <td class="inp"> 122 <input type="text" name="empName" id="empName" /> 123 </td> 124 </tr> 125 <tr> 126 <td class="word">email: </td> 127 <td class="inp"> 128 <input type="text" name="email" id="email" /> 129 </td> 130 </tr> 131 <tr> 132 <td class="word">salary: </td> 133 <td class="inp"> 134 <input type="text" name="salary" id="salary" /> 135 </td> 136 </tr> 137 <tr> 138 <td colspan="2" align="center"> 139 <button id="addEmpButton" value="abc"> 140 Submit 141 </button> 142 </td> 143 </tr> 144 </table> 145 </div> 146 <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> 147 <script type="text/javascript"> 148 /* 149 功能說明: 150 1. 點擊'Submit', 根據輸入的信息在表單中生成一行員工信息 151 2. 點擊Delete鏈接, 提示刪除當前行信息, 點擊確定後刪除信息 152 3. 點擊'全選': 選中所有員工 153 4. 點擊'全不選': 所有員工都不勾選 154 5. 點擊'反選': 改變所有員工的勾選狀態 155 6. 點擊'刪除': 提示是否一鍵刪除，確認則全部刪除，取消則逐個刪除 156 7. 點擊'表頭覆選框': 選中所有員工, 或者全不選中 157 8. 點擊某個員工前的覆選框時,更新'表頭覆選框'的選中狀態 158 */ 159 var $empName = $('#empName'); 160 var $email = $('#email'); 161 var $salary = $('#salary'); 162 /*********************覆選框定義**************************************/ 163 var $checkedAllBox = $('#checkedAllBox'); 164 var $checkedAllBtn = $('#checkedAllBtn'); 165 var $checkedNoBtn = $('#checkedNoBtn'); 166 var $checkedRevBtn = $('#checkedRevBtn'); 167 var $sendBtn = $('#sendBtn'); 168 var $items; 169 170 /******************************添加新員工********************************************/ 171 $('a').click(deleteItem); 172 function deleteItem(){ 173 var $item = $(this).parent().parent(); 174 var name = $item.children('td:eq(1)').html(); 175 if(confirm('您確定刪除' + name + '麽？')){ 176 $item.remove(); 177 } 178 return false; 179 } 180 181 $('#addEmpButton').click(function(){ 182 var empNameConfirm = /^[A-Za-z]+$/.test($empName.val()); 183 var emailConfirm = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($email.val()); 184 var salaryConfirm = /^[0-9]+$/.test($salary.val()); 185 if(!empNameConfirm){ 186 alert('請輸入正確的用戶名'); 187 }else if(!emailConfirm){ 188 alert('請輸入正確的郵箱'); 189 }else if(!salaryConfirm){ 190 alert('請輸入正確的工資信息'); 191 }else{ 192 $('<tr>') 193 .append('<td><input type="checkbox" name="items" id=""></td>') 194 .append('<td>' +$empName.val()+ '</td>') 195 .append('<td>' +$email.val()+ '</td>') 196 .append('<td>' +$salary.val()+ '</td>') 197 .append('<td><a href="deleteEmp?id=004">Delete</a></td></tr>') 198 .appendTo('#employeeTable') 199 .find('a').click(deleteItem); 200 reset();//reset函數的功能是對覆選框函數綁定進行重置 201 $checkedAllBox.prop("checked", false);//新加入一個員工則取消全部選中狀態 202 $empName.val(''); 203 $email.val(''); 204 $salary.val(''); 205 } 206 }); 207 208 /******************************覆選框********************************************/ 209 reset(); 210 //定義一個reset函數來重置覆選框的綁定事件 211 function reset(){ 212 $items = $('input[name = "items"]'); 213 //點擊某個員工時, 必要時更新'全選/全不選'的選中狀態 214 $items.click(function(){ 215 $checkedAllBox.prop('checked', isChecked($items.filter(':checked').length));//isChecked函數用來檢測並更新覆選框狀態 216 }); 217 //變色 218 $items.parent().parent().hover(function(){ 219 $(this).css('background-color', '#ffa'); 220 color(); 221 }, function(){ 222 $(this).css('background-color', ''
