jquery中插件实现自动添加用户

原创 2012年03月28日 16:54:42

//当点击添加时自动弹出窗口,填写完毕按确定自动添加到table表格中

效果图:


<!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>
<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		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 #CCC; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
	$("#dialog").dialog({
		autoOpen:false,
		modal:true,
		buttons:[
		        {
			text:"create on account",
			click:function(){
				var $tr=$("<tr><td>"+$("#username").val()+"</td><td>"+$("#email").val()+"</td><td>"+$("#pas").val()+"</td></td></tr>");
		//alert($tr);
		$tr.appendTo("#users");
			$("#dialog").dialog("close");
				            }
			
			    },
				{
			text:"cancel",
			click:function(){
				$("#dialog").dialog("close");
				            }
			    }
			]
		
		});
	$("#dialog_link").click(function(){
		$("#dialog").dialog("open");
		});
	})

</script>
</head>

<body>
<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
   <table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>姓名</th>
				<th>Email</th>
				<th>密码</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all" style="font-size:18px">创建新用户</a>
<!--对话框$("#dialog").dialog()他就是一个对话框,在页面中就会隐藏-->
<div id="dialog" title="创建新用户" style="display:none">
姓名<br><input type="text"  id="username">
Email<br><input type="text" id="email">
密码<br><input type="password" id="pas">
</div>
</body>
</html>


共有25款 jQuery自动完成插件开源软件

jQuery输入自动完成 Combogrid Combogrid 是一个jQuery插件用于为输入框添加高级自完成功能(auto-complete)。当用户输入的时候,会在输入框...
  • ystyaoshengting
  • ystyaoshengting
  • 2015年11月06日 14:12
  • 922

table合并单元格(Jquery 插件)

一个列表中有很多公共信息重复出现,看上去比较繁琐。在不不改动后台数据结构的情况下,改下一下前端代码把table 中的重复项合并单元格。   实现代码参考如下: 首先要导入: ...
  • dyllove98
  • dyllove98
  • 2013年04月29日 10:13
  • 8005

自己动手开发jQuery插件全面解析 jquery插件开发方法(这个写的还可以,但不够细致)

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象...
  • dashileipeng
  • dashileipeng
  • 2013年06月24日 19:59
  • 5520

jquery 实现滚动条至页面底端自动加载数据效果

无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动...
  • yaov_yy
  • yaov_yy
  • 2013年11月19日 14:13
  • 2154

jQuery实现自由拖动DIV插件

实现简单Div的拖动效果,主要分为三步。 1,需要拖动的Div拖动绑定,mousedown事件,鼠标mousedown的时候记录此时的鼠标相对浏览器的x轴和y轴,以及需要拖动Div的相对浏览器的le...
  • summer7310
  • summer7310
  • 2017年01月12日 14:10
  • 2373

Eclipse的jQuery提示Aptana插件安装方法

今天 Aptana - http://download.aptana.com/studio3/plugin/install
  • panhongzhi02
  • panhongzhi02
  • 2014年09月25日 20:02
  • 1567

8个超实用的jQuery插件应用

自jQuery诞生以来,jQuery社区都在不断地、自发地为jQuery创建许许多多功能不一的插件应用,很多jQuery插件非常实用,对我们的前端开发帮助相当大,不仅可以更完美的完成指定功能,而且节省...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:18
  • 180

jquery-easyui 实现用户的增删改查!

jquery-easyui 实现用户的增删改查!这里只是显示了客户端的代码,希望对大家有所帮助。...
  • awareness1990
  • awareness1990
  • 2015年06月10日 13:10
  • 1632

jQuery自定义插件

jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent()、appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局...
  • bao19901210
  • bao19901210
  • 2014年03月19日 16:57
  • 14902

web 开发jquery插件之jquery-autocomplete【一款联想自动提示的插件】

1.插件下载及api 地址 http://www.oschina.net/p/autocomplete/ 2.控制层response.getWriter().write(jsonStr); ...
  • Killer_ZR
  • Killer_ZR
  • 2014年03月03日 11:55
  • 7662
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery中插件实现自动添加用户
举报原因:
原因补充:

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