动态添加用户

实现代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<!-- 引入jquery开发包 -->

<script type="text/javascript" src="js/jquery-1.12.3.js"></script>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

$(function(){

    // 提交按钮添加 click事件

    $("#addBtn").click(function(){

        // 获取form的值

        var name = $("input[name='name']").val();

        var email = $("input[name='email']").val();

        var phone = $("input[name='phone']").val();

        // 在table 中生成tr

        var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>");

        $("table").append(tr);

        // form重置，清除刚才表单填写的内容

        $("form")[0].reset();

    });

});

// 删除

function deleteItem(a){

    // 删除 a 元素所在行

    $(a).parents("tr").remove();

}

</script>

</head>

<body>

    <div align="center">

        <h3>添加用户</h3>

        <form>

            姓名 <input type="text" name="name" />

            邮箱 <input type="text" name="email" />

            电话 <input type="text" name="phone" /> <br/>

            <input type="button" value="提交" id="addBtn" />

        </form>

        <hr/>

        <table border="1">

            <tr>

                <th>姓名</th>

                <th>email</th>

                <th>电话</th>

                <th>删除</th>

            </tr>

        </table>

    </div>

</body>

</html>

jquery动态添加表单数据的更多相关文章

  1. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  2. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  4. Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库

    利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...

  5. jquery Ajax提交表单数据

    //表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...

  6. JQuery 动态创建表单，并自动提交

    前言:写这个是为了实现使用cookie进行自动登录的功能, 下面的代码是一个元素一个元素进行创建和赋值的, (可以尝试下将所有的html代码(form.input)全部拼好以后放到${ } 中,再进行 ...

  7. JQuery动态创建表单并提交

    // 捕捉链接的点击事件 $('#btn').click(function(){ // 取得要提交的参数 var my_val = $.trim($('#ipt').val()); // 取得要提交页 ...

  8. js动态创建表单数据

    var formData = new FormData(); formData.append("file",fileList[i]); formData.append(" ...

  9. vue 使用 element ui动态添加表单

    html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...

随机推荐

  1. Docker学习总结之跨主机进行link

    原文来自: http://www.cnblogs.com/vikings-blog/p/4223462.html

  2. .NET Core 2.0.5安装具体步骤

    .NET Core 2.0.5 comprises: .NET Core Runtime 2.0.5 .NET Core SDK 2.1.4   SDK Installer SDK Binaries ...

  3. django-1366, "Incorrect string value: '\\xE6\\x88\\x9A\\xE4\\xBC\\x9F...'

    今天把之前的一些代码转移到另外一台电脑的时候, python manage.py syncdb 的时候报了 (1366, "Incorrect string value: '\\xE6\\x ...

  4. 18：django 日志系统

    django使用python内建的logging模块去建造自己的系统日志的,如果你想详细了解这个模块的话,请自己去看python的说明文档,这里仅仅介绍django中的日志系统 日志配置包括四个部分: ...

  5. HDU-4255

    A Famous Grid Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. Windows下上传项目到github

    首先,一定要有耐心.看到一大堆的命令行(其实并没有一大堆)不要觉得枯燥,最后当你成功把你的项目上传上去之后那种胜利的成果,还是挺有意思的.本人第一次写博客,勿喷. 我写的是主要的流程,详细内容还请移步 ...

  7. Linux让程序后台运行命令之screen与nohup

    一.nohup nohup时间长了会断掉  所以建议使用screen nohup 命令 & 如果运行成功刚默认会将标准输出重定向到当前目录的nohup.out文件中,查看此文件,可以了解运行的 ...

  8. 启动WAMPSERVER出现计算机中丢失 MSVCR110.dll

    最近电脑因为系统损坏无法启动,不得已重装系统,也让PHP程序员雷雪松下决心坚决的抛弃XP系统.这样一来跟上时代的步伐,二来也为Win7的市场占有率和消灭IE7以下浏览器做点贡献.,作为一个PHP程序员 ...

  9. 再聊语言,模式,OOD

    今天与人再次聊到这个话题,有人在为"到底该用什么模式"而烦恼,我相信,每个都经历过这个阶段一定都会感觉很熟悉这个烦恼我认为, 模式不是目的,只是工具,达到设计目标的工具,我们不会因 ...

  10. 洛谷P4331 [BOI2004] Sequence 数字序列 [左偏树]

    题目传送门 数字序列 题目描述 给定一个整数序列 a1​,a2​,⋅⋅⋅,an​ ,求出一个递增序列 b1​<b2​<⋅⋅⋅<bn​ ,使得序列 ai​ 和 bi​ 的各项之差的绝对 ...