涉及技术点
【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】编码:
代码语言：javascript复制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();
}
