用jquerylib，实现表格添加内容和删除内容

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="js/jquerylib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(function(){

				$("#a2").on('click','.a1',function(){

					 $(this).closest('tr').remove();

				});

				$("#a3").click(function(){

					var name=$("#name").val();

					var age=$("#age").val();

					var phone=$("#phone").val();

					$("table").append("<tr><td>"+name+"</td><td>"+age+"</td><td>"+phone+"</td><td class='a1'><a href='javascript:void(0)'>删除</a></td></tr>");

				});

			});

		</script>

	</head>

<body>

				<center>

		<form class="form" action="" method="post">

			姓名: <input type="text" name="" id="name" value="" />

			年龄: <input type="number" name="" id="age" value="" />

			电话: <input type="tel" name="" id="phone" value="" />

			<br />

			<br />

			<br />

			<input type="button" value="提交" id="a3"/>

		</form>

		<table border="1" width="600" cellspacing="" cellpadding="" background="img/016.jpg" width="100" id="a2">

			<tr>

				<th>姓名</th>

				<th>年龄</th>

				<th>电话</th>

				<th>操作</th>

			</tr>

			<tr>

				<td>瑶瑶</td>

				<td>8</td>

				<td>135444</td>

				<td class="a1"><a href="javascript:void(0)">删除</a></td>

			</tr>

			<tr>

				<td>渝儿</td>

				<td>24</td>

				<td>1356666666</td>

				<td class="a1"><a href="javascript:void(0)">删除</a></td>

			</tr>

			<tr>

				<td>傻逼</td>

				<td>18</td>

				<td>1355555555</td>

				<td class="a1"><a href="javascript:void(0)">删除</a></td>

			</tr>

		</table>

		</center>

	</body>

</html>

　　

jquerylib表单的更多相关文章

  1. ASP.NET Aries 入门开发教程9：业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  3. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路（5）- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net erp（办公oa）开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

随机推荐

  1. POJ2955 Brackets （区间DP）

    很好的区间DP题. 需要注意第一种情况不管是否匹配,都要枚举k来更新答案,比如: "()()()":dp[0][5]=dp[1][4]+2=4,枚举k,k=1时,dp[0][1]+ ...

  2. Vue实现长按图片识别图中二维码

    Vue实现长按图片识别图中二维码 思路:要想实现可以识别图片中的二维码,那必定是要将这张图进行上传操作,上传则需要file对象格式.不管是在H5还是APP中,展示的图片都是通过url的方式展示在img ...

  3. JSP中实现留言页面的编写并将留言信息展示出来

    1.JavaBean类,实现java代码和html的部分分离,提高代码的复用 package com.wgh; public class MessageBean { private String au ...

  4. 知识图谱-生物信息学-医学顶刊论文(Briefings in Bioinformatics-2021)：MPG：一种有效的自我监督框架，用于学习药物分子的全局表示以进行药物发现

    6.(2021.9.14)Briefings-MPG:一种有效的自我监督框架,用于学习药物分子的全局表示以进行药物发现 论文标题:An effective self-supervised framew ...

  5. 苹果iOS App上架流程，非iOS开发人员上架教程

      iOS应用上线发布流程一般包含相关证书文件的配置.Xcode的设置.App Store Connect填写App的相关信息.ipa包上传.审核结果以及相关邮件回复.相关证书文件的配置与Xcode的 ...

  6. 解决 net core 3.x 跨域问题

    跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 以下几种情况是造成跨域的原因: 域名相同,端口不同 域名相同,协议不同(即,一个 ...

  7. Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root

    上文已经搭建了 pnpm + monorepo 的基础环境,本文对 workspace-root 进行初始化配置,包括:通用配置文件.公共依赖.ESLint. 1 通用配置文件 在项目 根目录 下添加 ...

  8. WCF实现大文件上传

    一.文件服务接口 1.文件上传 2.文件传输(上传按钮) 3.文件传输停止 服务地址: 在客端添加服务器引用,从而实现客户端调用服务器的功能. 二.契约 服务契约[ServiceContract]:定 ...

  9. Installing harbor-2.6.2 on openEuler

    一.Installing harbor-2.6.2 on openEuler 1 地址 https://goharbor.io https://github.com/goharbor/harbor 2 ...

  10. jdk线程池ThreadPoolExecutor优雅停止原理解析（自己动手实现线程池）（二）

    jdk线程池工作原理解析(二) 本篇博客是jdk线程池ThreadPoolExecutor工作原理解析系列博客的第二篇,在第一篇博客中从源码层面分析了ThreadPoolExecutor在RUNNIN ...