<!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. UVA10600 ACM Contest and Blackout —— 次小生成树

    题目链接:https://vjudge.net/problem/UVA-10600 In order to prepare the “The First National ACM School Con ...

  2. [开源下载] 【开源项目】EasySL for Silverlight 4

    [开源下载] [开源项目]EasySL for Silverlight 4  [复制链接]       silverlight 452 主题 7 好友 1万 积分 管理员 贡献 879 原创 0 银元 ...

  3. 《Visual C++ 2010入门教程》系列三：关于C++的一些问题

    <Visual C++ 2010入门教程>系列三:关于C++的一些问题   这一回我自己都不知道应该写点什么好,或许今天的篇幅会比往常短很多.我说过,这不是C++的教程,因为我还没有那个能 ...

  4. Masonry 动画更新约束

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  5. AutoIT: ControlSetText

    1. ControlSetText :可以摆脱Send的限制,在适当的文本框位置输入用户想要输入的信息.2. ControlGetText可以获取文本 Run("notepad.exe&qu ...

  6. 使用x-template 定义模板

    demo <script type="text/x-template" id="myFirstScriptComponent"> <p> ...

  7. UVa 12712 && UVaLive 6653 Pattern Locker (排列组合)

    题意:给定 一个n * n 的宫格,就是图案解锁,然后问你在区间 [l, r] 内的所有的个数进行组合,有多少种. 析:本来以为是数位DP,后来仔细一想是排列组合,因为怎么组合都行,不用考虑实际要考虑 ...

  8. 洛谷 P3621 [APIO2007]风铃【贪心】

    没有算法,但是要注意细节. 首先无解的情况,显然的是最小深度的叶子节点和最大深度的叶子节点的深度差大于1:还有一种比较难想,就是如果一个点的左右子树都有最大和最小深度的叶子节点,这样交换左右子树也不行 ...

  9. poj 1474 Video Surveillance 【半平面交】

    半平面交求多边形的核,注意边是顺时针给出的 //卡精致死于是换(?)了一种求半平面交的方法-- #include<iostream> #include<cstdio> #inc ...

  10. java 继承还是组合

    1.我真的需要上溯转型(upcasting)吗? 如果是,才会用到继承. 2.