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寻找n以内完全数的方法
Jun 24 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
深入探究node之Transform
Jul 20 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
javascript中的隐式调用
Feb 10 Javascript
js动态引入的四种方法
May 05 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
vue+Element-ui前端实现分页效果
Nov 15 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
用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
PHP初学入门
2006/11/19 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
JavaScript模块详解
2017/12/18 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Python字符串替换实例分析
2015/05/11 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
商场促销活动方案
2014/02/08 职场文书
购房意向书范本
2014/04/01 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
安全标兵事迹材料
2014/08/17 职场文书
会员活动策划方案
2014/08/19 职场文书
2014年导购员工作总结
2014/11/18 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP