动态添加用户

实现代码

<!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. io流中比较特殊的流-java

    1.序列流(SequenceInputStream)整合个多个文件 A SequenceInputStream表示其他输入流的逻辑级联. 它从一个有序的输入流集合开始,从第一个读取到文件的结尾,然后从 ...

  2. python 作业

    Linux day01 计算机硬件知识整理 作业要求:整理博客,内容如下 编程语言的作用及与操作系统和硬件的关系 应用程序->操作系统->硬件 cpu->内存->磁盘 cpu与 ...

  3. C语言 反序打印字符串中的单词

    int main() { char *str = "see you later"; int r = strlen(str); char * p = str; ; while(*st ...

  4. mysql-表完整性约束

    阅读目录 一 介绍 二 not null与default 三 unique 四 primary key 五 auto_increment 六 foreign key 七 总结     一 介绍 回到顶 ...

  5. 机器学习方法（七）：Kmeans聚类K值如何选，以及数据重抽样方法Bootstrapping

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入.我的博客写一些自己用得到东西,并分享给 ...

  6. 深度学习方法（六）：神经网络weight参数怎么初始化

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入. 神经网络,或者深度学习算法的参数初始 ...

  7. Path Sum I&&II

      I Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...

  8. 181. Employees Earning More Than Their Managers

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...

  9. LoadRunner 执行单句SQL语句

    LoadRunner 执行单句SQL语句 Action() { int NumRows=0; int i=1; //建立数据库连接 lr_db_connect("StepName=Datab ...

  10. CentOS 6.5，SSH安装与配置

    #rpm -qa |grep ssh 检查是否装了SSH包 #yum install openssh-server 没有的话,安装SSH服务 #chkconfig --list sshd 检查SSHD ...