jquery插件实现添加用户!

原创 2012年03月28日 21:23:31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script language="javascript" type="text/jscript" src="./js/jquery-1.7.1.min.js" /></script>
<script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js" /></script>
<link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" href="./css/demo.css" />
<script type="text/javascript" language="javascript">

$(document).ready(function(){
	

		$("#dialog").dialog({
			
				 autoOpen:false,		//设置对话框打开方式,不是自动打开	
				 show:"blind",      	//打开时的动画效果
				 hide:"explode",		//关闭时的动画效果
				 modal:true,			//是否遮罩,true表示遮罩效果,false表示非遮罩	 	
				 draggable:false,		//是否可以拖动效果  默认值true表示可以拖动默认值false表示不可拖动 
				 closeOnEscape:false,	//是否采用esc键退出对话框,如果false表示不采用,默认值true表示采用
				 title:"添加用户",	 	//对话框的标题
				 position:"center",		//对话框弹出位置 top bottom center left right 默认值为center
				 width:400,				//对话框宽度	 
				 height:250,			//对话框高度 
				 resizable:false,		//是否可以改变的操作  如果为false表示不可改变大小  默认值为true表示可以改变大小
				 
				 buttons:
				 [{
					
					  text:"确定",
						click:function (){		   	
							//点击确定之后获取表单输入的值
							var textval=$("#name").val();
							var sexval=$("#sex").val();
							var ageval=$("#age").val();
							var telval=$("#tel").val();	
							//向表格中添加用户
							$("#users")
							.append("<tr align='center'><td>"+textval+"</td><td>"+sexval+"</td><td>"+ageval+"</td><td>"+telval+"</td><td><a href='#' id='del'>删除</a></td></tr>");
							
							//删除当前行
							$("td a").click(function (){
					
								$(this).parents("tr").remove();
									
							});
							 
							//关闭对话框 
							$(this).dialog("close"); 
							
							
							
							
						} 
				   },
					
					{
					  text:"取消",
						click:function (){
						   $(this).dialog("close");  
						} 
						
					
				 }],	
		
		
		
		
		});
			
				
				
				//触发连接的事件  当你点击 连接打开一个对话框
				$("#dialog_link").click(function (){
				
					$("#dialog").dialog("open");//open参数, 作用是打开对话框
					
				});
		
		
	
});
</script>

<style>
    #dialog_link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;}

	#dialog_link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;}
		

</style>

<style>
		body { font-size: 10px; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:90%; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: center; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
</head>

<body>

<table width="298" height="36" border="0" id="users" class="ui-widget ui-widget-content">
<h3>用户列表:</h3>
  <tr class="ui-widget-header " align="center">
    <td width="48">姓名</td>
    <td width="48">性别</td>
    <td width="48">年龄</td>
    <td width="57">电话</td>
    <td width="63">操作</td>
  </tr>
</table>

<br><br><br><br>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">添加用户</a>



<div id="dialog" title="添加用户">
	
    姓名:<input type="text" id="name" /><br>	
	性别:<input type="text" id="sex" /><br>
	年龄:<input type="text" id="age" /><br>
	电话:<input type="text" id="tel" /><br>

</div>

</body>
</html>


效果:



bootstrap+vue=动态添加删除用户数据

首先使用bootstrap进行页面布局,使用vue进行数据绑定,可实现添加、删除、全部删除。全部删除、“暂无数据”根据有无数据动态显示隐藏,这是vue的机制,做起来很方便。 Doc...
  • u013217071
  • u013217071
  • 2017年05月08日 21:45
  • 813

shell脚本批量添加用户

作业:写一个用户管理脚本,脚本参数,-a -d -p -m -s -h;要求:脚本参数无序也能执行,脚本根据不同状态返回不同状态码,参数错误能报错,短选项要支持连写,不显示多余的信息,用户已存在需提示...
  • dongfei2033
  • dongfei2033
  • 2017年07月15日 16:00
  • 461

基于Visual C++之Windows核心编程代码分析(2)实现Windows用户管理

在Windows编程中间,我们经常需要添加用户,删除用户,添加用户组等等功能,那些功能如何实现呢,我们请见实现代码与注释分析     [cpp] view plain c...
  • flyingleo1981
  • flyingleo1981
  • 2016年12月08日 21:40
  • 345

Struts学习总结(八)---使用Struts2实现用户信息的CRUD操作(二:添加操作)

使用Struts2实现用户信息的CRUD操作(二:添加操作)
  • wu631464569
  • wu631464569
  • 2016年09月01日 16:56
  • 743

SSH框架---Struts2+hibernate实现用户登录和增删改查案例

Struts2+hibernate实现用户登录和增删改查案例 开发工具MyEclipse 10.7.1 创建一个项目 web项目project。 部署好Struts2的开发环境: ...
  • yuexianchang
  • yuexianchang
  • 2016年07月04日 11:30
  • 4294

Jenkins添加用户

Jenkins新建          Jenkins刚开始的界面是允许访客进行所有操作的,这时Jenkins是有安全隐患的,也不容易去管理。这时,我们需要管理Jenkins的权限,对它的权限进行设置。...
  • u013049248
  • u013049248
  • 2015年12月18日 21:43
  • 3046

批量新建samba用户

使用过windows server 搭建过文件共享的朋友们可能知道,最让人闹心的不是共享和权限设置,而是添加用户,设置所属组。这个操作通常会占到整个配置过程的三分之二。最近我打算把公司最后一台,也是用...
  • cmzsteven
  • cmzsteven
  • 2015年10月11日 17:00
  • 1122

Linux批量添加删除用户

添加用户. /etc/init.d/functions #调用系统库 > /root/shell/user.txt #清空文件 >/root/shell/false_user.txt for n in...
  • bzd_111
  • bzd_111
  • 2016年05月15日 10:33
  • 456

RabbitMQ 添加用户

RabbitMQ 添加用户
  • kk185800961
  • kk185800961
  • 2017年02月15日 19:30
  • 2000

在 Web 应用中增加用户跟踪功能

进行用户跟踪的重要性 随着 Web 应用的复杂化,用户在网站上的操作过程日益复杂。网站功能的多样化和交互性的提高为用户提供了多种可能的浏览路径。对于一个复杂的站点,用户在网站上操作的行为模式和操作习...
  • sd4015700
  • sd4015700
  • 2015年08月10日 13:20
  • 631
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件实现添加用户!
举报原因:
原因补充:

(最多只允许输入30个字)