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

原创 2012年03月28日 17:26:48

<!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>jquery插件实现自动添加用户</title>

<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引进css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css">


<script language="javascript">
 $(document).ready(function(){
  //注册对话框
  $("#dialog-form").dialog({
   autoOpen:false,
   modal:true,
   width:350,
   height:300,
   
   buttons:{
    "添加":function(){
     $("#users").append("<tr>"+"<td>"+$("#name").val()+"</td>"+"<td>"+$("#email").val()+"</td>"+"<td>"+$("#password").val()+"</td>"+"</tr>");
      
      
     $(this).dialog("close");
     },
    "取消":function(){
     $(this).dialog("close");
     },
    }
   });
  $("#create-user").click(function(){
   $("#dialog-form").dialog("open");
   });
  
  
  
  
  
  });
</script>

  

</head>

<body>
<div class="demo">
 
<div id="dialog-form" title="添加用户">
 
 
 <form>
 
  <label for="name">Name</label><br>
  <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><br>
  <label for="email">Email</label><br>
  <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><br>
  <label for="password">Password</label><br>
  <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

 </form>
</div>
 
 
<div id="users-contain" class="ui-widget">
 
 <table id="users" class="ui-widget ui-widget-content">
  
   <tr class="ui-widget-header ">
    <th>Name</th>
    <th>Email</th>
    <th>Password</th>
   </tr>
   <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>johndoe1</td>
   </tr>
 </table>
</div>
<button id="create-user">Create new user</button>
 
</div><!-- End demo -->
 

</body>
</html>

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

相关文章推荐

使用jQuery插件实现添加用户

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

jquery插件实现添加用户!

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

五款改善用户体验的jQuery插件

改善网页的用户体验,可以从以下几个方面入手:菜单栏,tab,登录/注册,搜索,以及404页面。对于每一方面的优化,Gevin分别向大家推荐一个自己私藏的jquery插件,希望对大家有帮助,也欢迎大家多...

五款改善用户体验的jQuery插件

主题:五款改善用户体验的jQuery插件 精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0) 作者 正文 卢水...

利用[JQuery插件]___验证用户输入到文本框信息。

插件是以JQuery核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要包含该打包后的JS文件即可 我们所介绍的以及常用的一些插件都可以在这里找到 http://ar...

Google分析用户页面滚动深度分析jQuery插件 - jQuery Scroll Depth

日期:2012-4-29  来源:GBin1.com Google Analytics(Google分析)对于广大站长来说,肯定不是一个陌生的工具,它能提供给我们众多的网站访问相关信息及其用户使...
  • jjfat
  • jjfat
  • 2012-05-03 10:43
  • 386

jquery插件+.net 仿google的自动提示功能效果

jquery +.net 动态的完成仿google的自动提示效果

jQuery插件(表单验证/表单返值/灯箱/图片放大/cookie/自动匹配/右键菜单/选中变色/相加相减)

1、表单验证插件validate $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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