jquery练习

最新推荐文章于 2024-11-15 19:51:40 发布

一只前端小博客

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/m0_56054312/article/details/131291670

版权

登录页

<!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="jquery账号信息.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 = "jquery账号信息.html";
						return true;
					}
				});
				return false;
			}
		</script>
	</body>
</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>账号信息</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>
		<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();
}