jquery 实现用户关系表

最新推荐文章于 2020-11-16 22:31:31 发布
最新推荐文章于 2020-11-16 22:31:31 发布
阅读量225 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tan_tan_666/article/details/84823309
版权 
<!DOCTYPE html>
<html>
<head>
	<title>用户关系表</title>
	<script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-1.11.0.js"></script>
	<script type="text/javascript">
			$(function(){
				//删除单个
				function deleteUser(_this){
					var $this=$(_this);
					var $tr=$this.parents("tr");
					$tr.remove();
				}

				//删除所有
				function deleteAll(_this){
					var $this=$(_this);
					var $tr=$("tbody tr");
					$tr.empty();
				}

				//求最大数
				function maxNo(){
					var max=0;
					var tr=$("table tbody tr");
					if(tr.length==0){
						max=0;
					}else{
						var td=$("table tbody tr td[flag='no']");
						$.each(td,function(index,item){
							var no=parseInt($(item).text());
							if(no>max){
								max=no;
							}
						})
					}
					return max;
				}

				//校验用户名
				$("#names").change(function(){
					var user=/^[\u4e00-\u9fa5a-z]+$/gi;
					var userName=$("input[name='userName']").val();
					var userFlag=user.test(userName);
					if(userFlag==false){
						$("input[name='userName']").val("");
						return alert("用户名格式错误");
					}
				})

				//校验年龄
				$("#age").change(function(){
					var age=/\d+/;
					var userAge=$("input[name='userAge']").val();
					var ageFlag=age.test(userAge);
					if(ageFlag==false){
						$("input[name='userAge']").val("");
						return alert("年龄格式错误");
					}
					
				})

				//提交	
				$("#submit").click(function(){
					var userName=$("input[name='userName']").val();
					var userAge=$("input[name='userAge']").val();
					var userLove=$("input[name='userLove']:checked");

					var loves=[];
					$.each(userLove,function(index,item){
						var value=$(item).val();
						loves.push(value);
					});

					var user={};
					user.name=userName;
					user.age=userAge;
					user.love=loves;
					if(userName=="" || userAge=="" || userLove.length==0){
						return alert("信息未完善");
					}
					var $tbody=$("table tbody");
					var code=[];
					code.push("<tr>");
						code.push("<td flag='no'>"+(maxNo()+1)+"</td>");
						code.push("<td>"+user.name+"</td>");
						code.push("<td>"+user.age+"</td>");
						code.push("<td>"+user.love.join(",")+"</td>");
						code.push("<td><a href='#' onclick='deleteUser(this)'>删除</a></td>");
					code.push("</tr>");
					var codes=[];
					codes.push("<tr id =deleteAll>");
						codes.push("<td><a href='#' onclick='deleteAll(this)'>删除所有</td>")
					codes.push("</tr>");
					$tbody.append(code.join());
					$tbody.after(codes.join());
					//$("input[name='userName']").val("");
					//$("input[name='userAge']").val("");
					
			});

			//重置	
			$("#reset").click(function(){
				$("input[name='userName']").val("");
				$("input[name='userAge']").val("");
				var userLove=$("input[name='userLove']:checked");
				var loves=[];
				$.each(userLove,function(index,item){
					var value=$(item)
					value.removeAttr("checked");
				});
			})
				
			window.deleteUser=deleteUser;
			window.deleteAll=deleteAll;
			window.maxNo=maxNo;
		})

	</script>
	<style type="text/css">
		.user{
			position: absolute;
			left: 500px;
			font-size: 20px;
		}
		table.hovertable{
			font-size: 15px;
			border-color: #999999;
			border-collapse: collapse;
			padding-left: 20px;
		}
		table.hovertable td{
			width: 132px;
			height: 18px;
			border-width: 1px;
			padding: 10px;
			border-style:solid;
			border-color: #a9c6c9;
			font-weight:bold;
		}	
	</style>
</head>
<body>
	<p class="user"><b>用户管理</b></p>
	<p style="padding-top: 40px; font-size: 20px"><b>用户注册</b></p>
	<p>姓名 : <input type="" id="names" name="userName" placeholder="请输入姓名">
	<p>年龄 : <input type="" id="age" name="userAge" placeholder="请输入年龄">
	<p>爱好 :
			<input type="checkbox" name="userLove" value="篮球">篮球
			<input type="checkbox" name="userLove" value="足球">足球
			<input type="checkbox" name="userLove" value="乒乓球">乒乓球
	</p>
	<p>
		<button id="submit" value="提交">提交</button>
		<button id="reset" value="重置">重置</button>	
	</p>	
	<table class="hovertable">
		<thead>
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>爱好</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>		
</body>
</html>
滴...滴滴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用户关系表 存储_列式存储系列（一）CStore
weixin_39951295的博客
12-16 614
作者:辛庸，阿里巴巴计算平台事业部 EMR 技术专家。Apache Hadoop，Apache Spark commiter。对 Hadoop、Spark、Hive、Druid 等大数据组件有深入研究。目前从事大数据云化相关工作，专注于计算引擎、存储结构、数据库事务等内容。序本文是列式存储系列的第一篇。在这个系列中，我们将介绍几个典型的列式存储系统。这些列式系统的出现都有各自的时代背景。...
jQuery实现用户信息表格的添加和删除功能
01-21
1、浏览器界面 一个简单的用户信息操作 2、html代码 <body> <form name=userForm> <center> 用户录入 <br> 用户名: <input id=username name=username type=text size=15 /> E-mail: <input id=email name=email type=text size=15 /> 电话: <input id=tel name=tel type=
表、用户、表空间关系
02-16
表、用户、表空间关系
JQuery对象关系图
weixin_30306905的博客
02-27 327
上图转自：http://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html 自定义函数示例： $.fn.jAccordionunfold = function() { return this.each(function() { aler('a'); }); }; 转载于:https://www.cnblog...
jquery实现用户信息左右选择特效
04-01
jquery实现用户信息左右选择特效 改进了多选列表的选择非（select多选框左右移动）， 能添加的信息更多，操作也更多，容易移植和更改。 打包文件包含了jquery1.8
Jquery+ajax+php+mysql数据库实现用户注册登录
04-06
在本项目中，"Jquery+ajax+php+mysql数据库实现用户注册登录"是一个典型的Web应用程序开发案例，它涵盖了前端交互、后端处理以及数据库管理等多个方面。以下将详细阐述这些知识点： 1. **Jquery**：Jquery是一个...
jQuery实现带渐显效果的人物多级关系图代码
10-23
首先，本篇内容讲述了如何使用jQuery实现一个带有渐显效果的人物多级关系图。渐显效果，也就是元素在页面上逐渐出现的动画效果，可以通过jQuery的动画方法来实现。在这个过程中，用户通过点击某个元素，可以触发一个...
jQuery实现动态文字搜索功能
10-20
2. 动态文字搜索功能实现：文章主要讲解了如何通过jQuery实现一个动态的搜索功能。这个功能通常需要一个文本输入框，用户可以在其中输入搜索关键词，以及一个搜索按钮。当用户点击搜索按钮时，页面会根据用户输入的...
jQuery实现人事物关系拓扑图代码.zip
最新发布
11-07
《使用jQuery实现人事物关系拓扑图的代码详解》 在现代Web开发中，数据可视化是一种重要的工具，它能够帮助用户更好地理解复杂的关系和模式。人事物关系拓扑图是这种可视化的一种形式，用于展示人物、事件和事物...
无聊，做个微博用户关系图
shelgi的博客
11-21 2048
最近要学的太多，还有一堆期末大作业等着做，实在是脑阔疼。好不容易闲了一点，用networkx做个关系图玩一下 思路 爬取微博关注列表，然后再去遍历关注列表，得到每个用户的信息，以及他们的关注，这样用户关系就能丰富起来，画的图也就更复杂 代码 import requests import re import json import networkx as nx import matplotlib.p...
Jqueryeasy ui 的用户列表 datagrid 控件
哎幽的成长
10-28 1433
用户列表datagrid（重点 动态实现） Datagrid：数据列表 自带分页 区域(title tabs content  ) 系统dome $(function(){            $('#test').datagrid({               title:'My Title',               iconCls:'icon-save',     
html5_angular+jquery用户列表
Android___vv的博客
10-21 529
html> html> head lang="en"> meta charset="UTF-8"> title>title> script type="text/javascript" src="angular-1.3.0.js">script> script type="text/javascript" src="jquery.1.12.4.js">script>
震撼的CSDN用户关系图
web开发
01-12 903
前言 在一次校友聚会上，一个做到世界500强公司高级管理层的校友说：在这个城市，要随便找到一个人扯上关系，我最多通过三个人就能办到。这个社会老混混语出惊人，其道理却深值思考。这个社会是一个人与人组成的巨大的关系网络，每个人都是这个巨大网络中的一个节点。如能充分认识和利用这个网络，我们的工作和事业必将如虎添翼。 相信大家都有这样的经历，为了了解软件行业信息或解决开发难题时，都会求搜索和...
（转）震撼的CSDN用户关系图
【昆山人在上海】
04-15 513
http://www.javaeye.com/topic/640001
jquery实现将注册信息保存表格中
qq_43438694的博客
07-18 433
jquery实现将注册信息保存表格中 页面中输入注册的用户信息，点击注册按钮，将输入的信息保存展示到页面的表格中。点击表中的删除按钮，可以将当前一行的用户信息删除。 js代码如下： <script type="text/javascript"> /*1.绑定注册按钮事件*/ $("#btn").click(function(){ //2.获取表单中输入的内容 var username =$("#username").val(); var pwd = $(
MOOC资源爬取与数据存储
qq_43642348的博客
11-16 1182
<meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, mi...
Hibernate学习笔记10，用户角色分配，多对多关系表的级联管理
小辣鸡的博客
04-15 2675
需求: 用户即使用系统的用户，包括业务员、总经理等角色，不同类型的用户使用系统不同的功能，本功能要完成给用户分配角色，功能包括：给用户分配角色、取消用户分配的角色。 分析： 用户信息：单独创建一张用户表，存储使用本系统的用户。 角色信息：单独创建一张角色表，存储用户的角色。 一个用户拥有多个角色 一个角色下边有多个用户 用户和角色多对多关系，单独创建一个关系表记录用户拥有什么角色...
【数据结构与算法python】树的实现
思南的博客
09-09 978
方法一：树的嵌套列表实现 1、定义 借助Python List来实现二叉树树数据结构，采用递归的嵌套列表实现二叉树， 由具有3个元素的列表实现： [root，left，right] 第1个元素为根节点的值； 第2个元素是左子树（所以也是一个列表）； 第3个元素是右子树（所以也是一个列表）。 以下图为例，一个6节点的二叉树 根是myTree[0]，左子树myTree[1]，右子树myTree[2] 该树的嵌套列表表示方式如下： tree = ['a', ['b', ['d',[],[]],
jQuery实现渐显人物关系图代码示例
"jQuery实现带渐显效果的人物多级关系图代码" 在Web开发中，创建动态、交互式的人物多级关系图可以极大地提升用户体验。本文介绍了一种使用jQuery库来实现这种效果的方法。jQuery是一种广泛使用的JavaScript库，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值