用js操做表格

時間 2019-12-14
原文原文鏈接
實現思路：html
1.經過表單，能夠添加數據到表格中顯示
2.id自動根據已有的最大id值進行累加，刪除一條記錄的時候，最大id值不會變化（id的值不是根據表格中編號的最大值去計算）
3.隔行變色，新增長的行應該也須要隔行變色的
4.鼠標移入高亮
5.全選/全不選（checkAll和下面的每個checkbox是有關聯的）
6.選中變色
7.上移/下移
8.刪除
9.排序app
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         form {
  8             margin: 10px 0;
  9         }
 10         td {
 11             text-align: center;
 12         }
 13 
 14         .c1 {
 15             background: #CCCCCC;
 16         }
 17         .c2 {
 18             background: white;
 19         }
 20         .c3 {
 21             background: #ff9900;
 22         }
 23         .c4 {
 24             background: #186318;
 25             color: white;
 26         }
 27     </style>
 28     <script>
 29 
 30         var data = [
 31             {
 32                 id: 1,
 33                 name : '歡歡',
 34                 sex : '女',
 35                 age : 22
 36             },
 37             {
 38                 id: 2,
 39                 name : '小明',
 40                 sex : '男',
 41                 age : 28
 42             },
 43             {
 44                 id: 3,
 45                 name : '芊芊',
 46                 sex : '女',
 47                 age : 18
 48             }
 49         ];
 50 
 51         var maxId = 3;
 52 
 53         window.onload = function() {
 54             var tab = document.getElementById('tab1');
 55             var tbody = tab.tBodies[0];
 56 
 57             //獲取表單元素
 58             var form1 = document.getElementById('form1');
 59             var form2 = document.getElementById('form2');
 60 
 61             var checkAll = document.getElementById('checkAll');
 62 
 63             //初始化數據的添加
 64             //addData(data[0]);
 65             for ( var i=0; i<data.length; i++ ) {
 66                 addData(data[i]);
 67             }
 68             //初始化隔行變色
 69             changeColor();
 70 
 71             //經過表單添加數據
 72             form1.btn.onclick = function() {
 73 
 74                 if ( form1.username.value == '' || form1.age.value == '' || form1.sex.value == '' ) {
 75                     alert('請輸入完整的數據');
 76                 } else {
 77 
 78                     //添加數據到表格中
 79                     maxId++;
 80                     addData({
 81                         id: maxId,
 82                         name : form1.username.value,
 83                         sex : form1.sex.value,
 84                         age : form1.age.value
 85                     });
 86                     //每次添加新數據的時候，從新調用隔行變色
 87                     changeColor();
 88 
 89                     //由於新增數據是必定未選中的，那麼全選也應該是未選中的
 90                     checkAll.checked = false;
 91 
 92                 }
 93 
 94             }
 95 
 96             //點擊checkAll，全選和全不選
 97             checkAll.onclick = function() {
 98                 var checkBoxes = tbody.getElementsByTagName('input');
 99                 var trs = tbody.rows;
100 
101                 for ( var i=0; i<checkBoxes.length; i++ ) {
102 
103                     checkBoxes[i].checked = this.checked;
104 
105                     if (this.checked) {
106                         //全選
107                         trs[i].className = 'c4';
108                     } else {
109                         //全不選
110                         trs[i].className = trs[i].oldColor;
111                     }
112 
113                 }
114             }
115 
116             //排序
117             form2.orderButton.onclick = function() {
118                 if ( form2.orderName.value == '' || form2.orderBy.value == '' ) {
119                     alert('請選擇排序方式和排序字段')
120                 } else {
121                     order( form2.orderName.value, form2.orderBy.value );
122                 }
123             }
124 
125             /*
126             * 把單條數據添加到表格中
127             * @params object data 要添加到表格中的單條數據
128             * @return
129             * */
130             function addData(data) {
131 
132                 //每一條數據須要建立一個tr，6個td，每一個td裏面放置對應的內容
133 
134                 var tr = document.createElement('tr');
135 
136                 //checkbox
137                 var td0 = document.createElement('td');
138 
139                 //由於checkbox須要綁定事件，咱們這裏使用createElement的方式來建立checkbox
140                 var checkbox = document.createElement('input');
141                 checkbox.type = 'checkbox';
142 
143                 //給checkbox添加onclick選擇
144                 checkbox.onclick = function() {
145                     //根據當前的checkbox是否選中，去處理當前這一行的背景色
146                     if (this.checked) {
147                         //若是當前是選中的，把當前行class設置成c4
148                         tr.className = 'c4';
149                     } else {
150                         //若是當前不是選中的
151                         tr.className = 'c3';
152                     }
153 
154                     //處理全選
155                     var checkBoxes = tbody.getElementsByTagName('input');
156                     //循環查看tbody裏面的全部checkbox元素，只要有一個是沒選中的，那麼就非全選，不然就是全選
157                     for ( var i=0; i<checkBoxes.length; i++ ) {
158                         if ( !checkBoxes[i].checked ) {
159                             checkAll.checked = false;
160                             return;
161                         }
162                     }
163 
164                     //若是代碼能走到這裏來，就說明上面的循環過程當中，全部的checkbox都是選中的
165                     checkAll.checked = true;
166                 }
167 
168                 td0.appendChild(checkbox);
169 
170                 tr.appendChild(td0);
171 
172                 //編號
173                 var td1 = document.createElement('td');
174                 td1.innerHTML = data.id;
175                 tr.appendChild(td1);
176 
177                 //姓名
178                 var td2 = document.createElement('td');
179                 td2.innerHTML = data.name;
180                 tr.appendChild(td2);
181 
182                 //性別
183                 var td3 = document.createElement('td');
184                 td3.innerHTML = data.sex;
185                 tr.appendChild(td3);
186 
187                 //年齡
188                 var td4 = document.createElement('td');
189                 td4.innerHTML = data.age;
190                 tr.appendChild(td4);
191 
192                 //操做
193                 var td5 = document.createElement('td');
194 
195                 var btn0 = document.createElement('button');
196                 btn0.innerHTML = '上移';
197                 //上移
198                 btn0.onclick = function() {
199                     //把當前行的tr添加到tr的上一個兄弟節點的前面
200                     if ( tr.previousElementSibling ) {
201                         tbody.insertBefore( tr, tr.previousElementSibling );
202                         changeColor();
203                     }
204                 }
205                 td5.appendChild(btn0);
206 
207                 var btn1 = document.createElement('button');
208                 btn1.innerHTML = '下移';
209                 //下移
210                 btn1.onclick = function() {
211                     //把當前行的tr添加到tr的下一個兄弟節點的後面
212                     if ( tr.nextElementSibling ) {
213                         tbody.insertBefore( tr.nextElementSibling, tr );
214                         changeColor();
215                     }
216                 }
217                 td5.appendChild(btn1);
218 
219                 var btn2 = document.createElement('button');
220                 btn2.innerHTML = '刪除';
221                 //刪除
222                 btn2.onclick = function() {
223                     tbody.removeChild(tr);
224                     changeColor();
225 
226                     //處理全選
227                     var checkBoxes = tbody.getElementsByTagName('input');
228                     if (checkBoxes.length) {
229 //循環查看tbody裏面的全部checkbox元素，只要有一個是沒選中的，那麼就非全選，不然就是全選
230                         for ( var i=0; i<checkBoxes.length; i++ ) {
231                             if ( !checkBoxes[i].checked ) {
232                                 checkAll.checked = false;
233                                 return;
234                             }
235                         }
236 
237                         //若是代碼能走到這裏來，就說明上面的循環過程當中，全部的checkbox都是選中的
238                         checkAll.checked = true;
239                     }
240 
241                 }
242                 td5.appendChild(btn2);
243 
244                 tr.appendChild(td5);
245 
246                 //給每一行添加鼠標移入移出的事件處理函數
247                 //鼠標移入
248                 tr.onmouseover = function() {
249                     //鼠標移入的時候也須要根據當前tr裏面的checkbox的狀態去設置tr的class
250                     if (checkbox.checked) {
251                         this.className = 'c4';
252                     } else {
253                         this.className = 'c3';
254                     }
255                 }
256                 //鼠標移出
257                 tr.onmouseout = function() {
258                     //當鼠標離開tr的時候，須要根據當前tr裏面的checkbox的狀態去設置當前tr的class
259                     if (checkbox.checked) {
260                         //若是當前tr裏面的checkbox是選中的，那麼離開tr之後，這個tr的class應該仍是c4
261                         this.className = 'c4';
262                     } else {
263                         //若是當前tr裏面的checkbox不是選中的，那麼離開這個tr之後，應該回到當前tr最開始class
264                         this.className = this.oldColor;
265                     }
266                 }
267 
268                 tbody.appendChild(tr);
269             }
270 
271             /*
272             * 隔行變色
273             * @return
274             * */
275             function changeColor() {
276                 for ( var i=0; i<tbody.rows.length; i++ ) {
277 
278                     var checkbox = tbody.rows[i].querySelector('input');
279 
280                     //若是當前行是選中的，那麼就不須要從新設置隔行變色
281                     if ( !checkbox.checked ) {
282                         if ( i % 2 == 0 ) {
283                             //偶數行
284                             tbody.rows[i].className = 'c1';
285                             tbody.rows[i].oldColor = 'c1';
286                         } else {
287                             //奇數行
288                             tbody.rows[i].className = 'c2';
289                             tbody.rows[i].oldColor = 'c2';
290                         }
291                     }
292 
293                 }
294             }
295 
296             /*
297             * 排序
298             * */
299             function order(orderName, orderBy) {
300 
301                 var rows = [];
302 
303                 for ( var i=0; i<tbody.rows.length; i++ ) {
304                     rows.push(tbody.rows[i]);
305                 }
306 
307                 rows.sort(function(a, b) {
308 
309                     var v1;
310                     var v2;
311 
312                     //須要根據orderName和orderBy來排序
313 
314                     if ( orderName == 'id' ) {
315                         v1 = parseFloat(a.cells[1].innerHTML);
316                         v2 = parseFloat(b.cells[1].innerHTML);
317                     }
318 
319                     if ( orderName == 'age' ) {
320                         v1 = parseFloat(a.cells[4].innerHTML);
321                         v2 = parseFloat(b.cells[4].innerHTML);
322                     }
323 
324                     //asc : 升序
325                     //desc : 降序
326                     if (orderBy == 'asc') {
327                         return v1 - v2;
328                     } else {
329                         return v2 - v1;
330                     }
331 
332                 });
333 
334                 //console.log(rows)
335                 for (var i=0; i<rows.length; i++) {
336                     tbody.appendChild(rows[i]);
337                 }
338                 changeColor();
339             }
340         }
341     </script>
342 </head>
343 
344 <body>
345 <form id="form1">
346     <input type="text" name="username" />
347     <select name="sex">
348         <option value="">請選擇一個性別</option>
349         <option value="男">男</option>
350         <option value="女">女</option>
351     </select>
352     <input type="text" name="age" />
353     <input type="button" name="btn" value="提交">
354 </form>
355 <!--選作-->
356 <p>
357     <form id="form2">
358         <select name="orderName">
359             <option value="">選擇一個排序字段</option>
360             <option value="id">編號</option>
361             <option value="age">年齡</option>
362         </select>
363         <select name="orderBy">
364             <option value="">選擇一個排序方式</option>
365             <option value="asc">升序</option>
366             <option value="desc">降序</option>
367         </select>
368         <input type="button" name="orderButton" value="排序">
369     </form>
370 </p>
371 <table border="1" width="100%" id="tab1">
372     <thead>
373     <tr>
374         <th>全選 <input type="checkbox" id="checkAll"></th>
375         <th>編號</th>
376         <th>姓名</th>
377         <th>性別</th>
378         <th>年齡</th>
379         <th>操做</th>
380     </tr>
381     </thead>
382     <tbody></tbody>
383 </table>
384 </body>
385 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。