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>

时间: 2013-11-12

jquery实现在页面加载的时自动为日期插件添加当前日期

在页面加载的时候自动为日期插件添加当前日期. <script type="text/javascript"> $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:</label></td&

JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

自己动手制作jquery插件之自动添加删除行的实现

效果图如下,演示地址请点击 既然是插件,那就应该可以使用$("div").method({})这样的jquery写法来调用,它的做法是: 复制代码 代码如下: (function($) { })(jQuery); 然后给插件命名: 复制代码 代码如下: $.fn.autoAdd = function(options) {} 这样我们就可以在页面里用$(dom).autoAdd({...}) 来调用这个插件了,接着我们再给它一些特定的参数,比如我们要复制哪一行,要给哪个按钮加上添加.删除

自己动手制作jquery插件之自动添加删除行功能介绍

这是一个我认为功能基本完善的插件,它包括添加.删除.插入.上下移动.索引标识. 数量控制等功能,基本上能满足大部分多行添加的需求,当然,在完成这些功能的前提下,我也尽量保持较少的代码量和易理解的逻辑性. 这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ,引用自己动手制作jquery插件之自动添加删除行(上)里的介绍,这是一个简单的插件,它的作用是:一个系统中有大量的需要对一个行进行复制添加,希望能够进行批量的操作时,

jquery 结合C#后台的数组对文章的关键字自动添加链接的代码

当我们需要在后台读取多个关键字时,我们可以先把后台的数据库读取到一个数组中(在数据库添加多个关键词时用","隔开): 复制代码 代码如下: public string[] str; //添加一个公共数组一遍jquery调用 protected void Page_Load(object sender, EventArgs e) { string str1 = 读取数据库的关键词; str=str1.Split(','); } 页面的JQuery: <html s> <

jQuery自动添加表单项的方法

本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=

HTML页面禁用Enter键自动提交表单的方法

在HTML页里面由于使用了form,常常需要禁用enter提交表单.因为内容页或者母版页自身有如果有type="submit"的button,当textbox聚焦时,按下enter都会触发表单的默认提交(不论是IE还是firefox),于是需要在onkeydown中监听用户的按键.实际测试,IE8中导致表单提交的不确定因素太多,点击表单的table中的td都会触发表单提交,而firefox则不会:于是在ie和ff中禁用表单提交需要不同的思路. 对于IE: 只有当事件源是TEXTAREA

php自动提交表单的方法(基于fsockopen与curl)

本文实例讲述了php基于fsockopen与curl实现自动提交表单的方法.分享给大家供大家参考,具体如下: fsockopen和curl都可以做php自动提交表单 1. fsockopen方法: php代码: <?php /*----------------------------------------------------------- *功能:使用PHP socke 向指定页面提交数据 *作者:果冻 说明:post($url, $data) * * $url = 'http://www

Java自动添加重写的toString方法详解

Java怎么自动添加重写的toString方法,这里我们将给大家介绍详细的解决方法. 首先,添加一个任意的类,具体的类型没有要求,然后在主程序中创建对象,这里要求构造方法的位置要求必须是可实例化的类或其子类对象. 然后在主程序中创建对象,这里要求构造方法的位置要求必须是可实例化的类或其子类对象. 然后,在该程序中点击鼠标右键,找到鼠标右键,找到source选项. 在第三步中找到source选项中,找到generate toString( )方法. 进入之后,什么都不用选择,直接点击界面最下方的o

Bootstrap导航菜单点击后无法自动添加active的处理方法

Bootstrap提供了很丰富的前后端框架,为不精通CSS的程序猿们提供了很大的便利.前段时间在使用Bootstrap中的菜单控件时,其中的链接点击后,无法自动添加active类,即无法自动激活.需要适当做如下处理才OK. 废话说了,直接上代码: <ul class="tabbable faq-tabbable"> <li class="active"><a href="@Url.Action(" rel="

vue使用Element组件时v-for循环里的表单项验证方法

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

使用jQuery重置(reset)表单的方法

由于JQuery中,提交表单是像下面这样的: 复制代码 代码如下: $('#yigeform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 复制代码 代码如下: $('#yigeform').reset() 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下,说是,JQuery中没有reset方法,经核对,果然是没有. 那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法,如下: 复制代码 代码

Spring Data Jpa 自动生成表结构的方法示例

想在部署的时候随应用的启动而初始化数据脚本,这不就是Spring Data Jpa中的自动生成表结构,听起来特别简单,不就是配置Hibernate的ddl-auto嘛,有什么好说的,是个人都知道.当初我也是这样认为,实际操作了一把,虽然表是创建成功了,但是字段注释,字符集以及数据库引擎都不对,没想到在这些细节上翻车了. 毕竟开翻的车还要自己扶起来,于是在这记录一下. 注:本文中使用的Spring Data Jpa版本为2.1.4.RELEASE 以MySQL为例,我这边举个例子: import

PHP 下载文件时自动添加bom头的方法实例

首先弄清楚,什么是bom头?在Windows下用记事本之类的程序将文本文件保存为UTF-8格式时,记事本会在文件头前面加上几个不可见的字符(EF BB BF),就是所谓的BOM(Byte order Mark).不仅限于 记事本保存的文件,只要在文件的开口包含了EF BB BF 几个不可见的字符(十六进制应该是是xEFxBBxBF,用二进制编辑文件可见).这像是一个约定俗成的东西,当系统看到这玩意的时候,就会觉得你这个文件是UTF-8编码的. 如果你的接口是UTF-8的,你需要强制下载一个文件,

js固定DIV高度,超出部分自动添加滚动条的简单方法

复制代码 代码如下: function setheight()     {     var div=document.getElementById("event_basicInfo");     //div.style.width="40%";     div.style.height=400;     div.style.overflow="auto";     }     window.onload=setheight;