js_jQuery综合机试练习题
生活随笔
收集整理的這篇文章主要介紹了
js_jQuery综合机试练习题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
涉及技術點
【form表單數據獲取】
【正則表達式驗證】·【通用驗證方式】
【dom操作】
【checkbox復選框_全選/全不選】
【添加list值并刷新dom】
【刪除list值并刷新dom】
演示demo
登錄頁：
?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登錄頁</title></head><body><form action="index.html" onsubmit="return chick(this)"><p>賬號:<input type="text" name="userName" placeholder="請輸入賬號" required></p><p>密碼:<input type="password" name="passWord" placeholder="請輸入密碼" required></p><p><input type="submit" value="提交"></p></form><script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script><script src="js/index.js"></script><script>function chick(o) {var userName = o["userName"].value;var passWord = o["passWord"].value;list.forEach(e => {if (e["userName"] == userName && e["passWord"] == passWord) {alert(e["userName"] + "登錄成功.");location.href = "index.html";return true;}});return false;}</script> </body></html>主頁【index.html】：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border-collapse: collapse;width: 100%;text-align: center;}</style> </head><body><p>編號:<input type="number" id="id" placeholder="請輸入編號" required/></p><p>賬號:<input type="text" id="userName" placeholder="請輸入賬號" required/></p><p>密碼:<input type="password" id="passWord" placeholder="請輸入密碼" required/></p><p>年齡:<input type="number" id="age" placeholder="請輸入年齡" required/></p><p>性別:<select id="sex" required><option value="男">男</option><option value="女">女</option></select></p><p>簡介:<input type="text" id="introduce" placeholder="請輸入簡介" required/></p><p><input type="button" onclick="AddUser()" value="提交"></p><hr/><div id="tab"></div><script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script><script src="js/index.js"></script> </body></html>【index.js】編碼:
var list = [{ "id": 1, "userName": "admin", "passWord": "123456", "age": 18, sex: "男", "introduce": "管理員" },{ "id": 2, "userName": "zhangsan", "passWord": "123456", "age": 21, sex: "男", "introduce": "張三" },{ "id": 3, "userName": "lisi", "passWord": "123456", "age": 16, sex: "女", "introduce": "李四" } ]; init();function init() {$("#tab").html("");var tab = "<table border='1'>";tab += "<tr><th><button onclick='chooseAll(this)'>全選</button></th><th>編號</th><th>賬號</th><th>密碼</th><th>年齡</th><th>性別</th><th>簡介</th><th>操作</th><tr>";list.forEach(e => {tab += "<tr>";tab += "<td><input type='checkbox' class='choose' value=" + e["id"] + "></td>";tab += "<td>" + e["id"] + "</td>";tab += "<td>" + e["userName"] + "</td>";tab += "<td>" + e["passWord"] + "</td>";tab += "<td>" + e["age"] + "</td>";tab += "<td>" + e["sex"] + "</td>";tab += "<td>" + e["introduce"] + "</td>";tab += "<td><button onclick='delId(" + e["id"] + ")'>刪除</button></td>";tab += "</tr>";});tab += "</table>";tab += "<button onclick='delAll()'>批量刪除</button>";$("#tab").append(tab); }function delAll() {if (!confirm("是否刪除所選行？")) {return;}var choose = $(".choose");for (let i = 0; i < choose.length; i++) {if (choose[i].checked == true) {for (let j = 0; j < list.length; j++) {if (list[j]["id"] == choose[i].value) {console.log(list[j]["id"]);list.splice(j, 1);break;}}}}init(); }function chooseAll(o) {var choose = $(".choose");if ($(o).text() == "全選") {$(o).text("全不選");for (let i = 0; i < choose.length; i++) {$(choose[i]).attr("checked", "true");}} else {$(o).text("全選");for (let i = 0; i < choose.length; i++) {$(choose[i]).removeAttr("checked");}}}function updateSex() {init($("#sex").val()); }function AddUser() {var id = $("#id").val();var userName = $("#userName").val();var passWord = $("#passWord").val();var age = $("#age").val();var sex = $("#sex").val();var introduce = $("#introduce").val();var patrn = /^(\w){6,20}$/;if (!patrn.exec(passWord)) {alert("密碼6-20位");return false;}list.push({"id": id,"userName": userName,"passWord": passWord,"age": age,"sex": sex,"introduce": introduce});init();return false; }function delId(o) {if (!confirm("是否刪除此行？")) {return;}for (let i = 0; i < list.length; i++) {if (list[i]["id"] == o) {list.splice(i, 1);break;}}init(); } 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的js_jQuery综合机试练习题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： file_get_contents遍历a
- 下一篇： js_jQuery【下拉菜单联动dom操