js 动态添加表单 table tr
<!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的更多相关文章
- javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...
- jquery动态添加表单数据
动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...
- JS动态创建表单post提交
<script> //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form&q ...
- js动态添加行和列(table)
function AddTableRow() { var Table = document.getElementById("NewTable"); //取得自定义的表对象 NewR ...
- js动态添加和删除table的行例子
<table id="table_report" class="table table-striped table-bordered table-hover&quo ...
- vue 使用 element ui动态添加表单
html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...
- js动态创建表单数据
var formData = new FormData(); formData.append("file",fileList[i]); formData.append(" ...
- 动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...
- 使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高 手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
随机推荐
- docker registry的CI规划
目前代码全部署在docker中, 考虑用jenkins打包成docker包再推送到docker registry 打包推送过程中自动按照日期打标签,并且刷新latest
- Cmake的介绍和使用 Cmake实践【转】
本文转载自:http://www.cppblog.com/Roger/archive/2011/11/17/160368.html Cmake的介绍和使用 Cmake实践 Cmake优点: 1. ...
- 通过minicom传送文件的相关配置及使用方法
写一下我使用串口向开发板传送文件中遇到的问题及解决办法: 使用的软硬件环境: 虚拟机:VMware® Workstation 8.0.1 Linux操作系统:Fedora 9 开发板:mini6410 ...
- 【转】iOS笔记-自定义控件(OC)
原文网址:http://www.jianshu.com/p/f23862eb7b8a 导读: iOS开发中,很多时候系统提供的控件并不能很好的满足我们的需求,因此,自定义控件便成为搭建UI界面中必不可 ...
- 【转】python中获得当前目录和上级目录
原文地址:http://blog.csdn.net/liuweiyuxiang/article/details/71154346 获取当前文件的路径: from os import path d = ...
- P3398 仓鼠找sugar 又一次血的教训
做什么题都要注意数组的大小,不要犯下数组越界的错误(温馨(狠心)提示): 做了好多遍就是不对,原来是[20]的数组,在for下循环1——>20,神奇爆零: 链接:https://www.luog ...
- Mysql数据库的用户和日志管理
Mysql数据库的用户和日志管理 数据库的用户管理 1.mysql用户账号管理 用户账号 user@host user:账户名称 host:此账户可通过哪些客户端主机请求创建连接线程,可以是ip.主机 ...
- (转)理解POCO
POCO的概念是从java的POJO借用而来,而两者的含义是一致的,不同的仅仅是使用的语言不一样.所以POCO的解释就是“Plain Old C# Object”. 从字面上翻译为“纯洁老式的C#对象 ...
- 11.Flask-钩子函数
在Flask中钩子函数是使用特定的装饰器的函数.为什么叫做钩子函数呢,是因为钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码,那么这种函数就叫做钩子函数. before_first_requ ...
- Android 线程池系列教程(3) 创建线程池
Creating a Manager for Multiple Threads 上一课 下一课 1.This lesson teaches you to Define the Thread Pool ...