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();
}

js_jQuery综合机试练习题相关推荐

[华为机试练习题]55.最大公约数 amp; 多个数的最大公约数
题目描写叙述: 输入2个数字,最后输出2个数字的最大公约数题目类别: 位运算难度: 0基础执行时间限制: 无限制内存限制: 无限制阶段: 入职前练习输入: 2个整数输出: 输出数字1和 ...
[华为机试练习题]60.水仙花数
题目描述: 水仙花数又称阿姆斯特朗数. 水仙花数是指一个n 位数( n≥3 ),它的每个位上的数字的n 次幂之和等于它本身.(例如:1^3 + 5^3 + 3^3 = 153) 求输入的数字是否为水 ...
[华为机试练习题]51.数列求和
题目描写叙述: 题目描写叙述编敲代码,输入一个正整数n.求下列算式的值.要求定义和调用函数fact(k)计算k的阶乘. 1+1/2!+ .... +1/n! 计算结果保存在double类型变量中. ...
[华为机试练习题]37.合唱队
题目描述: 计算最少出列多少位同学,使得剩下的同学排成合唱队形说明:N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学 ...
（记录）华为机试练习题13—句子逆序
华为机试练习题13-句子逆序题目描述输入描述: 输出描述例如: 代码(Java) 题目描述将一个英文语句以单词为单位逆序排放.例如"I am a boy",逆序排放后为&q ...
[华为机试练习题]44.24点游戏算法
题目注意: 6 + 2 * 4 + 10 = 24 不是一个数字一个数字的计算代码 /*--------------------------------------- * 日期:2015-07-0 ...
Java-Web机试练习题一、后台管理系统——管理员管理模块
题目:后台管理系统--管理员管理模块一. 语言和环境 1. 实现语言:JAVA 语言. 2. 环境要求:MyEclipse/Eclipse + Tomcat + MySql. 3. 使用技术:Jsp ...
[华为机试练习题]5.IP地址推断有效性
题目推断输入的字符串是不是一个有效的IP地址具体描写叙述: 请实现例如以下接口 boolisIPAddressValid(constchar* pszIPAddr) 输入:pszIPAddr 字符 ...
华为2018年机试练习题[java版]
package PractiseTest; import java.util.*; public class demo1 {/*** 有这样一道智力题:"某商店规定:三个空汽水瓶可以换一瓶汽 ...

js_jQuery综合机试练习题

涉及技术点

主页【index.html】：

【index.js】编码:

js_jQuery综合机试练习题相关推荐

最新文章

热门文章