js_jQuery综合机试练习题
2023-09-14 09:05:03 时间
涉及技术点
【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跳转代码_js中跳转页面路径
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- js与jQuery的区别以及jQuery选择器和方法的使用
- 【说站】js函数执行过程的探究
- js中moment方法_jquery 虚拟dom
- JS面试题-js新增基本数据类型BigInt
- js定时器与延时器_JS做定时器倒计时
- jquery验证插件对表格数据的验_js与jquery的区别
- 2年过去了,谁还记得曾想取代Node.js的他?
- jQuery表单插件jquery.form.js详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- js jquery数组去重详解编程语言
- jQuery ready和JS onload事件的区别
- JS获取父节点和兄弟节点
- Cube.js:试试这个新的数据分析开源工具
- js验证表单大全
- 常用JS加密编码算法代码
- 风吟的小型JavaScirpt库(FY.JS).
- jquery.cookie.js操作cookie实现记住密码功能的实现代码
- 关于文本框默认值的操作js代码
- 获取客户端电脑日期时间js代码(jquery)
- 很弱的js表格换行效果(表格移动行)
- JS随即打乱数组实现代码
- js获取坐标通过JS得到当前焦点(鼠标)的坐标属性
- js数组Arraysort方法使用深入分析
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- 解析jQuery与其它js(Prototype)库兼容共存
- 使用js修改客户端注册表的方法
- 非html5实现js版弹球游戏示例代码
- 各种常用的JS函数整理
- 简单选项卡js和jquery制作方法分享
- asp.net中js+jquery添加下拉框值和后台获取示例
- 超棒的响应式布局jQuery插件Freetile.js
- jquery.cookie.js使用指南