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>

赞 (0)

相关推荐

  • 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 结合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 <=

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

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

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

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

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

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

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

    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=

  • 用jquery中插件dialog实现弹框效果实例代码

    复制代码 代码如下: <!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=&qu

  • jquery中取消和绑定hover事件的实现代码

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

  • jQuery实现公告新闻自动滚屏效果实例代码

    本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti

  • Android中RecyclerView实现Item添加和删除的代码示例

    Android中RecyclerView实现Item添加和删除的代码示例

    本文介绍了Android中RecyclerView实现Item添加和删除的代码示例,分享给大家,具体如下: 先上效果图: RecyclerView简介: RecyclerView用以下两种方式简化了数据的展示和处理: 1. 使用LayoutManager来确定每一个item的排列方式. 2. 为增加和删除项目提供默认的动画效果,也可以自定义. RecyclerView项目结构如下: Adapter:使用RecyclerView之前,你需要一个继承自RecyclerView.Adapter的适配器

  • Python中根据时间自动创建文件夹的代码实现

    Python中根据时间自动创建文件夹的代码实现

    导语 ​ 电脑桌面文件太多查找起来比较花费时间,并且凌乱的电脑桌面也会影响工作心情,于是利用python根据时间自动建立当日文件夹,这样就可以把桌面上文件按时间进行存放. 代码实现 # _*_coding:utf-8_*_ import os import datetime def create_folder(path): # 年-月-日 时:分:秒 now_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") # 年

  • .NET WinFrom中给文本框添加拖放事件的代码

    在开发.NET WinForm程序时,有时候我们希望窗体上的文本框能接受鼠标拖放事件,比如允许将文件直接拖放到文本框中以直接获取到文件的本地路径,或者将选取的字符串直接拖放到文本框中等等.要实现这个功能其实很简单,代码如下. 1. 将文本框的属性AllowDrop设置成True 2. 给文本框添加DragEnter事件 复制代码 代码如下: private void textBox1_DragEnter(object sender, DragEventArgs e) { if (e.Data.G

  • jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于"名称"和"值"的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. 下面就使用jQuery读取music.txt文件中的JSON数据格式信息. 首先,music.txt中的内容如下: 复制代码 代码如下: [ {"optionKey":"1"

随机推荐