jQuery实现表单动态添加与删除数据操作示例
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>用户名注册</title> <script> $(document).ready( function () { $( "#button" ).click( function () { var name = $( "#yonghu" ).val(); var mima = $( "#mima" ).val(); var youxiang = $( "#youxiang" ).val(); var tr = "<tr><td>" + '<input type="checkbox">' + "</td><td>" + name + "</td><td>" + mima + "</td><td>" + youxiang + "</td><td>" + '<input type="button" value="删除">' + "</td></tr>" ; $( "#table" ).append(tr); $( ":button" ).click( function () { $( this ).parent().parent().remove(); }); }); }); </script> </head> <body> 用户:<input id= "yonghu" type= "text" > 密码:<input id= "mima" type= "password" > 邮箱:<input id= "youxiang" type= "text" > <input type= "submit" id= "button" value= "添加" > <table id= "table" border= "1ps" > <tr> <td><input type= "checkbox" ></td> <td>用户名</td> <td>密码</td> <td>邮箱</td> <td>操作</td> </tr> </table> </body> </html> |
运行结果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery实现表单动态添加与删除数据操作示例的更多相关文章
- Jquery实现表单动态加减、ajax表单提交
一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- jquery 为表单动态添加元素
$('<input />').attr('type','hidden') .attr('name','type') .attr('value', ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- Angular-表单动态添加删除
angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...
- 用 jQuery 实现表单验证(摘抄)
——选自<锋利的jQuery>(第2版)第5章的例题 5.1.5 表单验证 表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 用 jQuery 实现表单验证(转载)
jQuery 官方 API 地址: http://api.jquery.com/ 在线引用 jQuery:http://code.jquery.com/ ——选自<锋利的jQuery>(第 ...
随机推荐
- 异常-finally关键字的特点及作用
package cn.itcast_07; import java.text.ParseException; import java.text.SimpleDateFormat; import jav ...
- Appium Android 获取包名appPackage和appActivity的几种方法
情况1: 安装包未安装到手机 准备前提条件: 1 Android SDK管理工具目录 2 PC端有apk包 使用方法: 1 打开终端,当前路径移动到sdk管理工具目录tools或build-tools ...
- with as 语句
with就是一个sql片段,供后面的sql语句引用. 详情参见:https://www.cnblogs.com/Niko12230/p/5945133.html
- JavaScript快速排序法实现数组排序
大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 var arr = [10,8,6,9,1,7,1,13,5,1,9]; / ...
- UI测试
先是从一张图开始,让大家看看这个图里有什么不妥: 接着告诉大家具体有哪些不妥: 然后结合这个找茬的过程分享下界面测试的概念和方法. 界面测试:简称UI测试,测试功能模块界面上看到的所有元素(包括空文字 ...
- 27 Python 装饰器
一. 我们先写一个玩游戏的步骤 # def play(): # print("双击LOL") # print("选择狂战士") # print("进草 ...
- sqlserver2016 management tool v18
安装完sql server 2016 sp1版本后再安装管理工具v18版本,启动管理工具,启动不起来,自动退出了,没有任何反应. 解决该问题方案: 找到Microsoft.VisualStudio.S ...
- JavaScript里面9种数组遍历!
大家好,我在这里总结分享了JavaScript中的闹腾的数组循环家族. 1.大家最常用的for循环,我就不解释了: for(let i = 0; i < 5 ; i++){ console.l ...
- PHP--API
PHP所有能力都是函数,内置1000多个函数,不是每一个函数都默认直接可以使用,有一些需要安装或者启用额外的“插件”扩展. 1,获取字符串长度 <?php $str='hello'; echo ...
- linux的一些运维操作基本知识
1 ~/.bashrc 这个可以认为是linux系统的启动项,每次启动的时候都会运行一些这里边的命令: 常见的有: alias rm='rm -i'//修改某些指令: export LD_LIBRAR ...