动态添加用户

实现代码

<!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. 其实linux下远程windows并不麻烦

    1:如果你是安装的ubuntu.那么安装完成之后就自带一个Remmina的远程桌面工具 2:这里我们需要安装rdesktop和tsclient,其中rdesktop是基于命令行的工具,tsclient ...

  2. 8：django sessions（会话）

    django会话 django提供对匿名会话全方位的支持,会话框架可以存储和检索每个站点访问者的任意数据.会话数据是存储在服务器端的,并且简要了发送和接受cookie的过程,cookies只包含一个s ...

  3. 安装node的最新版本

    前段时间小试了一下node 这段时间就差不多忘了 恩 然后现在自己想去回顾一下,然后流程想再好好弄一遍 争取掌握node 因为我现在已经安装了 一个node版本 那我想安装最新版本吧 首先,看看你的n ...

  4. java静态类与非静态类区别

    java静态与非静态区别   这里的静态,指以static关键字修饰的,包括类,方法,块,字段. 非静态,指没有用static 修饰的. 静态有一些特点: 1.全局唯一,任何一次的修改都是全局性的影响 ...

  5. SEO：查找网站的百度收录情况和如何让百度快速收录

    查询收录的工具地址: http://tool.chinaz.com/baidu/entry/ 如何让百度快速收录: 一.大家都熟知的百度网站提交,只需要提交网站的首页即可.以前做完这一步就被百度收录的 ...

  6. sql中where和having的区别

    “Where” 是一个约束声明,使用Where来约束来自数据库的数据,Where是在结果返回之前起作用的,且Where中不能使用聚合函数. “Having”是一个过滤声明,是在查询返回结果集以后对查询 ...

  7. android之 Activity跳转出现闪屏

    原文:http://blog.csdn.net/az313/article/details/17321549 同一个应用,在不同手机上测试,Activity之间跳转出现闪屏,界面来回跳转…… 查阅网上 ...

  8. 解决Windows10与Ubuntu系统时间不一致问题

    前言: 安装完windows与Ubuntu双系统之后会发现windows与Ubuntu时间不一致.这是硬件时间都一样的情况下,Ubuntu使用的是UST,Windows使用的是CST.要解决该问题就要 ...

  9. 洛谷P3620 [APIO/CTSC 2007] 数据备份 [堆，贪心，差分]

    题目传送门 题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽 ...

  10. 性能测试篇：LoadRunner11 压力测试实例笔记

    最近在学习用loadrunner做web性能测试,简单记录一下一个自学实例流程. 1.录制测试脚本 (1).打开LR11,点击create/edit Script来打开VUgen (2).点击新建 ( ...