<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>js 动态添加表单</title>

	<script src="scripts/jquery-1.7.1.min.js"></script>

</head>

<body>

<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>

<div align="center">

        <h3>添加表单</h3>

        <form>

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

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

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

             <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>

　　

js 动态添加表单 table tr的更多相关文章

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

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

  2. jquery动态添加表单数据

    动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...

  3. JS动态创建表单post提交

    <script> //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form&q ...

  4. js动态添加行和列(table)

    function AddTableRow() { var Table = document.getElementById("NewTable"); //取得自定义的表对象 NewR ...

  5. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

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

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

  7. js动态创建表单数据

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

  8. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  9. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

随机推荐

  1. C++ 多线程与并发

    1. 非原子操作 这些非原子操作在被编译为汇编代码后不止一条指令. 自加.自减少: new 关键字: 申请内存: 调用构造函数: pInst = new T; // 对于这样一个赋值语句,更是包含了如 ...

  2. 并不对劲的fhq treap

    听说很对劲的太刀流不止会splay一种平衡树,并不对劲的片手流为了反驳他,并与之针锋相对,决定学学高端操作. 很对劲的太刀流-> 据说splay常数极大,但是由于只知道splay一种平衡树能对序 ...

  3. [Usaco2015DEC] Breed Counting

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4397 [算法] 树状数组 时间复杂度 : O(QlogN) [代码] #includ ...

  4. 《编程珠玑，字字珠玑》读书笔记完结篇——AVL树

    写在最前面的 手贱翻开了<珠玑>的最后几章,所以这一篇更多是关于13.14.15章的内容.这篇文章的主要内容是“AVL树”,即平衡树,比红黑树低一个等次.捣乱真惹不起红黑树,情况很复杂:而 ...

  5. baiduTemplate 基本知识总结

    html <div id="tem1"></div> <div id="tem2"></div> <!-- ...

  6. Ubuntu 12.04的gnome classic panel添加程序快捷键(转载)

    How to add applets to the Gnome classic panel in Ubuntu 12.04 转自:http://www.borfast.com/blog/how-add ...

  7. CI框架中一个类中调用另一个类中已经加载对象测试

    controller.php <?php class CI_Controller { private static $instance; public function __construct( ...

  8. Linux 常用命令五 软链接和硬链接

    一.软链接 相当于windows的快捷方式,当源文件不存在时,软链接失效. 创建软链接: wang@wang:~/workpalce/python$ ls -l 总用量 -rw-rw-r-- wang ...

  9. bzoj 1898: [Zjoi2005]Swamp 沼泽鳄鱼【dp+矩阵快速幂】

    注意到周期234的lcm只有12,也就是以12为周期,可以走的状态是一样的 所以先预处理出这12个状态的转移矩阵,乘起来,然后矩阵快速幂优化转移k/12次,然后剩下的次数暴力转移即可 #include ...

  10. 3198: [Sdoi2013]spring【容斥原理+hash】

    容斥是ans= 至少k位置相等对数C(k,k)-至少k+1位置相等对数C(k+1,k)+至少k+2位置相等对数*C(k+2,k) -- 然后对数的话2^6枚举状态然后用hash表统计即可 至于为什么要 ...