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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery插件实现添加用户!

无标题文档 $(document).ready(function(){ $("#dialog").dialog({ autoOpen:false, //设置...

使用jQuery插件实现添加用户

无标题文档 $(function (){ //利用jQuery获取输入的信息 var $name=$("#name") ; var $mail=$("#email"...

jQuery的cookie插件实现保存用户的数据

cookies.html .txt{ width: 150px; height:20px; border: 1px blue soli...
  • zzjmay
  • zzjmay
  • 2014-04-14 15:15
  • 1330

wordpress插件share to view all 实现自动化用户无感知分享到微博之自动分享到微博后显示指定内容

上一篇文章我们讲了wordpress插件share to view all的使用方法,这一篇我们讲解如何在用户无感知情况下自动分享你的文章到微博,如果您没看我的上一篇文章,建议还是先看一下,了解一下s...
  • llqqxf
  • llqqxf
  • 2016-07-08 16:53
  • 4522

jQuery autoComplete插件-实现自动匹配

参数说明:minChars (Number) : 在触发autoComplete钱用户至少需要输入的字符数 .Default:1 ,如果设为0,在输入框内双击或者删除输入框内内容时显示列表。 widt...

jquery autocomplete插件 实现输入框自动补全

需求:如图 提示内容从数据库中取得。1.jsp页面加入输入框也可用纯html标签。2.jsp页面加入 autocomplete插件的css和js文件,另外还有jquery的js文件<script...

jquery实现的自动关联的Autocomplete插件

转载地址:http://www.cnblogs.com/zhuwenlong/archive/2012/12/05/2803116.html 项目中关于到一个自动关联的功能,于是找了...

用struts2 标签和Jquery 插件实现动态值,自动检索填充中值

用到了这俩个jquery                         &...

使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

要实现如图所示效果,通过ajax,和Autocomplete完成匹配,整了好久,做一下记录。 实现过程如下 jsp页面:引入   添加标签用于绑定: &nbsp;药店名称: auto...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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