<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{ text-decoration: none; cursor: pointer; color: palevioletred; } </style> </head> <body> <a href="javascript:addUser();">添加用戶</a> <input type="text" id="findInp"/> <a id="findUser">查找用戶</a> <table border="1" cellspacing="0" cellpadding="3"> <tr> <th>ID</th> <th>用戶名</th> <th>密碼</th> <th>操作</th> </tr> <tr> <td>1001</td> <td>張三</td> <td>123asd</td> <td> <a id="up">更新</a> <a id="del">刪除</a> <a class="up">上移</a> <a class="down">下移</a> </td> </tr> <tr> <td>1002</td> <td>李四</td> <td>456zxc</td> <td> <a id="up">更新</a> <a id="del">刪除</a> <a class="up">上移</a> <a class="down">下移</a> </td> </tr> </table> <div id="addUser" style="display: none;"> <form> ID:(只能是數字) <br /> <input type="number" id="uid"/><br /> 用戶名：(只能是漢字) <br /> <input type="text" id="user"/><br /> 密碼：(英文+數字或下划線，長度不小於6) <br /> <input type="text" id="pwd"/><br /> <a id="btn-add">提交</a> <a id="btn-update">更新</a> <a id="cancel">取消</a> </form> </div> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/prac1.js" type="text/javascript" charset="utf-8"></script> </body> </html>
//刪除當前行 //用事件委托實現，否則點擊一次后會失效 $('table').on('click','#del',function(){ $(this).parents('tr').remove(); //$(this).parent().parent().remove(); 同上 //parent() parents()的區別就是前者獲取的只有它的上一級元素 //后者把它的所有上級元素都獲取了，不過可以明確指定獲取哪一級 }); //初始化 function init(){ $('input').val(''); }; //顯示隱藏的表單框 function addUser(){ init(); //show()里面的參數是動畫執行的時間，可有可無，也可加一個回調函數,hide()同理 $('#addUser').show(1000); $('#btn-add').show(); $('#btn-update').hide(); console.log($('#uid').val()); }; $('#cancel').click(function(){ $('#addUser').hide(1000); init(); }); //提交驗證 //定義一個全局變量，判斷操作是否成功 var result=false; $('#btn-add').click(function(){ msg(); if(result){ $('#addUser').hide(1000); } }) function msg(){ var val1=$('#uid').val(); var val2=$('#user').val(); var val3=$('#pwd').val(); //正則驗證 var reg_user = /^[\u0391-\uFFE5]+$/; var reg_pwd = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i; if(val1==''){ result=false; alert('請輸入ID') }else if(val2==''){ result=false; alert('請輸入用戶名') }else if(val3==''){ result=false; alert('請輸入密碼') }else if(!reg_user.test(val2)){ result=false; alert('用戶名格式不正確') }else if(!reg_pwd.test(val3)){ result=false; alert('密碼格式不正確') }else{ result=true; }; if(result){ push(); }; } //把信息添加到相應表格內 function push(){ //創建tr節點 var $tr=$('<tr></tr>') //遍歷獲取input中的內容依次填到td中 //第一個參數是索引，第二個參數是數據對象 //如果是json格式的話，第一個參數是鍵，第二個是值 $('form input').each(function(index,domEle){ //添加td節點 var $td=$('<td></td>'); //將內容循環添加到創建好的td中 $td.append($(domEle).val()); //將td添加到創建的tr中 $td.appendTo($tr); }); //創建td的刪除更新按鈕 var $td=$("<td><a id='up'>更新</a> <a id='del'>刪除</a> <a class='up'>上移</a> <a class='down'>下移</a></td> "); $td.appendTo($tr); //最后將創建的tr插入到table中的最后一個位置 $tr.appendTo('table'); } //更新操作 //定義全局變量，用於存放要修改的行號 var row=0 $('table').on('click','#up',function(){ $('#addUser').show(1000); $('#btn-add').hide(); $('#btn-update').show(); //獲取最后一個td前面所有的td節點 var val=$(this).parent().prevAll(); var arr=[]; //通過循環將所有td里面的文本放到數組里面 for(var i=0;i<val.length;i++){ arr[arr.length]=val.eq(i).text(); }; //得到的arr數組與表格順序相反 //將arr數組逆序與表格順序相同，以便依次填到input中 var arr1=arr.reverse(); for(var j=0;j<$('form input').length;j++){ $('form input').eq(j).val(arr1[j]) }; //i是該行所在的行號 var i=$('table').find("tr").index(val.parent()[0]); console.log(i); row=i; }); //更新驗證 $('#btn-update').on('click',function(){ console.log($(this)); msg(); $('#addUser').hide(1000); //過濾器 過濾索引，過濾出行號為row的tr，並移除 $('tr').filter(function(index){ return index==row }).remove(); }); //查找操作 $('#findUser').on('click',function(){ //記錄Input框中輸入的值用於查找 var val=$('#findInp').val(); console.log(val); var arr=[]; //通過循環將第一列td的值存入到數組中 for(var i=0;i<$("tr").find("td:first").length;i++){ arr[arr.length]=$("tr").find("td:first").eq(i).text(); }; //通過循環判斷input中輸入的值，在表格中是否存在 for(var j=0;j<arr.length;j++){ if(arr[j]==val){ result=true //記錄其所在的行號 var z=j; } }; //置頂操作 //如果存在的話，就將該行置頂 if(result){ console.log(z); // $('tr:nth-child('+z+1+')').css('background-color','#2D93CA');同下兩行 var $tr=$('tr').eq(z+1) $tr.css('background-color','#2D93CA'); //淡入淡出的一個動畫 $tr.fadeOut().fadeIn(); //prepend() 在被選元素的開頭插入指定的內容 $('table').prepend($tr); } else{ alert('不存在該用戶，請確認您輸入的ID是否正確') } }) //上移操作 $('table').on('click','.up',function(){ //.parents('tr') 找到父親為tr的節點 var $tr=$(this).parents('tr'); console.log($tr); //判斷當前行是否是第一行 if($tr.index()!=0){ $tr.fadeOut().fadeIn(); //prev() 獲得匹配元素集合中每個元素緊鄰的前一個同胞元素 //before() 在被選元素的前面插入指定的內容 $tr.prev().before($tr); } }) //下移操作 $('table').on('click','.down',function(){ //獲取一共多少行 var length1=$('tr').length; var $tr=$(this).parents('tr'); console.log(length1); //如果當前行是最后一行，則不再往下移 if($tr.index()!=length1-1){ $tr.fadeOut().fadeIn(); //next() 獲得匹配元素集合中每個元素緊鄰的后一個同胞元素 //after() 在被選元素的后面插入指定的內容 $tr.next().after($tr); } })