JS登录跳转加表单的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
<table border="1px">
<tr>
<td>账号<input id="userName" onblur="Wen()" type="text"> <br><span id="userName_ts"></span></td>
</tr>
<tr>
<td>密码<input id="passWord" onblur="Wen()" type="password"> <br><span id="passWord_ts"></span></td>
</tr>
<tr>
<td><input type="button" id="DL" value="登录"> <input type="reset" value="重置"></td>
</tr>
</table>
</form>
<script>
$(function () {
$("#DL").click(function () {
var userName = $("#userName").val();
var passWord = $("#passWord").val();
var undefined = Wen();
if (undefined){
if (userName=="123" && passWord=="123"){
window.location.href="图书管理.html";
}else {
alert("账号密码错误");
}
}else {
alert("请先输入账号密码");
}
})
})
function Wen() {
var userName = $("#userName").val();
var passWord = $("#passWord").val();
var userName_ts = document.getElementById("userName_ts");
var passWord_ts = document.getElementById("passWord_ts");
if (userName==""){
userName_ts.innerHTML="账号不能为空";
return false;
}else {
userName_ts.innerHTML=""
}
if (passWord==""){
passWord_ts.innerHTML="密码不能为空";
return false;
}else {
passWord_ts.innerHTML=""
}
return true;
}
</script>
</body>
</html>
下面是增删改查代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<table border="1px">
<tr id="onn">
<th>ID</th>
<th>NAME</th>
<th>钱</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>《啊是多久啊》</td>
<td>123</td>
<td><input type="button" onclick="Sc(this)" value="删除"><input type="button" onclick="Xg(this)" value="修改"></td>
</tr>
</table>
<input type="text" id="Wen"><input type="button" id="Cha" value="查询"><br>
ID<input type="text" id="a">NAME<input type="text" id="b">qian<input type="text" id="c"><input type="button" id="tianj" value="添加"><input id="que" type="button" value="确认">
</body>
<script>
<!-- 查询-->
$(function () {
$("#que").hide();
$("#tianj").click(function () {
var ID = $("#a").val();
var NAME = $("#b").val();
var Q = $("#c").val();
if (ID=="" || NAME=="" || Q ==""){
alert("ximsdmak");
return;
}
var hang = $("<tr><td>"+ID+"</td><td>"+NAME+"</td><td>"+Q+"</td><td><input type=\"button\" onclick=\"Sc(this)\" value=\"删除\"><input type=\"button\" onclick=\"Xg(this)\" value=\"修改\"></td></tr>");
$("#onn").after(hang);
$("#a").val("");
$("#b").val("");
$("#c").val("");
})
})
function Sc(obj) {
var b = confirm("zhe");
if (b){
$(obj).parent().parent().remove();
}else {
alert("取消");
}
}
//修改
var trs;
function Xg(obj) {
$("#que").show();
$("#tianj").hide();
var td = $(obj).parent();
trs=td.parent();
var tab = td.siblings();
var ID = tab[0].innerText;
var NAME = tab[1].innerText;
var Q = tab[2].innerText;
$("#a").val(ID);
$("#b").val(NAME);
$("#c").val(Q);
}
$("#que").click(function () {
var ID = $("#a").val();
var NAME = $("#b").val();
var Q = $("#c").val();
if (ID=="" || NAME=="" || Q ==""){
alert("ximsdmak");
return;
}
var hang = $("<tr><td>"+ID+"</td><td>"+NAME+"</td><td>"+Q+"</td><td><input type=\"button\" onclick=\"Sc(this)\" value=\"删除\"><input type=\"button\" onclick=\"Xg(this)\" value=\"修改\"></td></tr>");
trs.replaceWith(hang);
$("#a").val("");
$("#b").val("");
$("#c").val("");
$("#que").hide();
$("#tianj").show();
})
//查询
$("#Cha").click(function () {
var Wen = $("#Wen").val();
var ID = $("table tr:gt(0)");
if (Wen!=""){
for (var i =0 ; i<ID.length ;i++){
var id = ID.eq(i).find("td").html();
if (Wen==id){
ID.eq(i).show();
}else {
ID.eq(i).hide();
}
}
}else {
ID.show();
}
})
</script>
</html>
浙公网安备 33010602011771号