一、登录验证
本题利用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>