python學習_day61_登錄驗證及表格增刪改作業
阿新 • • 發佈：2017-11-20
hide children lag head pla close console turn bsp
一、登錄驗證
本題利用jQuery插件的方式進行處理，即將jQuery控制代碼單獨作為插件，插件的好處可以方便同結構表單重復使用。插件代碼如下：
/*加自執行函數是為限定變量作用域，避免不同插件間變量重復導致插件汙染問題；將$符號換成jQuery變量傳入是為了解決某些人惡意將$賦為其他值*/ (function (jq) { function f2(arg) { var $currEle=arg; $currEle.find(":submit").on("click",function () { jq(".error").text("");var flag=true; $currEle.find("input.require").each(function () { var currVal=jq(this).val(); if(currVal.length===0){ var msgPre=jq(this).prev().text(); jq(this).next().text(msgPre+"不能為空"); flag=false; return false; } }); return flag; }); } // 給我的jQuery對象添加了一個名叫check的擴展 jq.fn.extend({ check:function () { f2(this) // this表示的是的當前操作的標簽 } }); })(jQuery);
需控制表單主代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸校驗作業</title> <style> .error { color: red; } </style> </head> <body> <form id="f1" action=""> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密碼</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登錄"> </form> <form id="f2" action=""> <p> <label for="user2">姓名</label> <input class="require" id="user2" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd2">密碼</label> <input class="require" id="pwd2" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登錄"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="extend123.js"></script>//引入插件 <script> $(document).ready(function () { // 文檔加載完之後執行 $("#f1").check(); //執行插件中的函數 $("#f2").check(); //執行插件中的函數 }); </script> </body> </html>
二、表格增刪改
答案如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .delete{ background-color: red; color: white; } .edit{ background-color: green; color: white; } .hide{ display: none; } .shade{ position: fixed; background-color: #cccccc; top: 0; bottom: 0; right: 0; left: 0; opacity: 0.5; } .model{ position: fixed; top: 50%; right: 50%; width: 400px; height: 300px; margin-right: -150px; margin-top: -200px; background-color: white; } </style> </head> <body> <button class="add">添加</button> <table border="1px" cellpadding="10px" cellspacing="5px"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>愛好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>alex</td> <td>吹逼</td> <td> <button class="delete">刪除</button> <button class="edit">編輯</button> </td> </tr> <tr> <td>2</td> <td>egon</td> <td>杠娘</td> <td> <button class="delete">刪除</button> <button class="edit">編輯</button> </td> </tr> </tbody> </table> <div class="shade hide"></div> <div class="model hide"> <p><label for="">姓名<input type="text" class="item name"></label></p> <p><label for="">愛好<input type="text" class="item hobby"></label></p> <p> <input type="button" value="提交" class="submit"> <input type="button" value="取消" class="cancel"> </p> </div> <script src="jquery-3.2.1.min.js"></script> <script> /*定義一個顯示模態框函數*/ function show() { $(".shade").removeClass("hide"); $(".model").removeClass("hide") } /*定義一個關閉模態框函數*/ function close() { $(".shade").addClass("hide"); $(".model").addClass("hide") } /*定義一個清除input內容的函數*/ function clearInput() { $(".item").each(function () { $(this).val("") }) } /*定義了一個獲取添加數據所需順序序號的函數*/ function getNummber() { var $trNummber=$("tbody").children(); // console.log($trNummber.length) var lastNummber=$trNummber.length+1; // console.log(lastNummber) return lastNummber; } /*添加按鈕綁定事件*/ $(".add").on("click",function () { show() }); /*input框的取消按鈕綁定事件*/ $(".cancel").on("click",function () { clearInput(); close() }); /*input框的提交按鈕綁定事件*/ $(".submit").on("click",function () { var arr=[]; $(".item").each(function () { arr.push($(this).val()) }); if($(".model").data("tds")){ var $data=$(".model").data("tds"); $data.eq(1).text(arr[0]); console.log( $data.eq(1)); $data.eq(2).text(arr[1]); $(".model").removeData("tds") //將編輯時儲存的信息刪除，避免編輯後添加時無法添加 } else { var nummber2=getNummber(); var s2=" <tr><td>"+nummber2+"</td><td>"+arr[0]+"</td><td>"+arr[1]+"</td><td><button class=\"delete\">刪除</button> <button class=\"edit\">編輯</button></td></tr>"; $("tbody").append(s2); } clearInput(); close() }); /*刪除按鈕事件委托*/ $("tbody").on("click",".delete",function () { //更新序號 $(this).parent().parent().nextAll(); // 找到它後面所有的tr // 每一行的序號都減1 $(this).parent().parent().nextAll().each(function () { var $currTd = $(this).children().first(); var num = $currTd.text() - 1; // 令人窒息的操作 $currTd.text(num); }); //刪除當前行 $(this).parent().parent().remove() }); /*編輯按鈕事件委托*/ $("tbody").on("click",".edit",function () { show(); var $td_Object=$(this).parent().siblings(); // console.log($td_Object); var old_text=[]; $td_Object.each(function () { old_text.push($(this).text()) }); // console.log(old_text); $(".name").val(old_text[1]); $(".hobby").val(old_text[2]); $(".model").data("tds",$td_Object); //將找到的當前行的td保存起來 }) </script> </body> </html>
python學習_day61_登錄驗證及表格增刪改作業