jquery中插件实现自动添加用户的具体代码


Posted in Javascript onNovember 15, 2013

jquery中插件实现自动添加用户的具体代码

<!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> 
Javascript 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
捕获未处理的Promise错误方法
Oct 13 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 #Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 #Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 #Javascript
当json键为数字时的取值方法解析
Nov 15 #Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 #Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 #Javascript
Knockout text绑定DOM的使用方法
Nov 15 #Javascript
You might like
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python虚拟环境项目实例
2017/11/20 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python 实现A*算法的示例代码
2018/08/13 Python
python requests.post带head和body的实例
2019/01/02 Python
python与字符编码问题
2019/05/24 Python
如何使用Python调整图像大小
2020/09/26 Python
白色公司:The White Company
2017/10/11 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
班主任工作经验材料
2014/02/02 职场文书
市场营销调查计划书
2014/05/02 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
一年级小学生评语大全
2014/12/25 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
Python常遇到的错误和异常
2021/11/02 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python