jQuery动态添加和删除表格行
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >蚂蚁部落</ title > < script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js" ></ script > < script type = "text/javascript" > $(function(){ $("#addOneRow").click(function(){ var tempTr=$("tr:first").clone(true); $("tr:last").after(tempTr); $("tr:last > td > #name").val(""); $("tr:last > td > #address").val(""); }); $(".delOneRow").click(function() { if ($("tr").length < 2 ) { alert("至少保留一行!"); } else{ if (confirm("确认删除?")) { $(this).parent().parent().remove(); } } }); }); </script> </ head > < body > < table border = "1" > < tr > < td >姓名:</ td > < td >< input type = "text" id = "name" name = "name" /></ td > < td >地址:</ td > < td >< input type = "text" id = "address" name = "address" /></ td > < td >< input type = "button" class = "delOneRow" value = "删除" /></ td > </ tr > </ table > < input type = "button" id = "addOneRow" value = "添加一行" /> </ body > </ html > |
上面你的代码实现添加或者删除行的功能,下面介绍一下它的实现过程。
一.代码注释:
(1).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$("#addOneRow").click(function(){}),为添加按钮注册click事件处理函数。
(3).var tempTr=$("tr:first").clone(true),克隆第一行的数据,采用深度克隆,具体可以参阅下面的相关阅读。
(4).$("tr:last").after(tempTr),在最后一行插入克隆的行。
(5).$("tr:last > td > #name").val(""),将最后一个tr行的用户名文本框的值设置为空,其实就是讲新添加的行的文本框的内容设置为空,因为上面采用的是深度拷贝,否则会将数据一起拷贝过来。
(6).$("tr:last > td > #address").val(""),和上面是一样的道理。
(7).$(".delOneRow").click(function() { }),为删除按钮注册click事件处理函数。
(8).if ($("tr").length < 2) { alert("至少保留一行!"); } ,如果行数只剩下一行,那么就会弹出提示。
(8).else{ if (confirm("确认删除?")) {$(this).parent().parent().remove();}},点击删除的时候弹出确认框,这样的话会将当前删除按钮的父元素的父元素删除,其实就是tr删除。
二.相关阅读:
(1).:first选择器参阅jQuery :first一章节。
(2).clone()方法参阅jQuery clone()一章节。
(3).after()方法参阅jQuery after()一章节。
(4).parent()方法参阅jQuery parent()一章节。
(4).remove()方法参阅jQuery remove()一章节。
jQuery动态添加和删除表格行的更多相关文章
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- jQuery----事件绑定之动态添加、删除table行
在jquery中,给元素绑定事件,本文一共介绍三种方法,运用案例,针对最常用的on()方法,进行事件绑定操作. 事件绑定方法: ①$(element).bind() 参数:{ “事件名称1”:func ...
- jQuery动态添加、删除按钮及input输入框
输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...
- JS添加和删除表格行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jQuery 动态添加、删除css样式
1.addClass css中: <style type="text/css"> .chColor {background: #267cb7;color:w ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jQuery如何动态添加具有删除按钮的行
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
随机推荐
- xargs、chattr命令
一.xargs:将标准输入转化成命令行参数 用法:xargs [OPTION] ... COMMAND INITIAL-ARGS ...使用参数INITIAL-ARGS运行COMMAND,并从输入中读 ...
- shell脚本 自启动tomcat,nginx
分为2步走 1. 脚本文件 : /usr/local 2. crontab -e : /5 * * * /bin/sh /usr/local/restart.sh 注意事项:可能用户权限会影响脚本的部 ...
- myBatis+Spring+SpringMVC框架面试题整理
myBatis+Spring+SpringMVC框架面试题整理(一) 2018年09月06日 13:36:01 新新许愿树 阅读数 14034更多 分类专栏: SSM 版权声明:本文为博主原创文章 ...
- ado.net SqlHelp类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 谈谈对this的指向问题
普通函数中:this——window 定时器:this——window 构造函数中:this——当前实例化的对象 事件处理函数:this——事件触发对象
- 给定一个字符串,根据字符出现频率排序--Java实现
题目描述: 给定一个字符串,请将字符串里的字符按照出现的频率降序排列. 示例 1: 输入:"tree" 输出:"eert" 解释:'e'出现两次,'r'和't' ...
- c# log4net安装时在AssemblyInfo中提示找不到log4net解决办法
在安装log4net时,按照安装手册需要在AssemblyInfo.cs里添加log4net的配置信息 [assembly: log4net.Config.XmlConfigurator(Config ...
- 第一篇.1、python基础之核心风格
一.语句和语法 #:注释 \:转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 ::将两个语句连接到一行,可读性差,不建议使用 ::将代码的头和体分开 语 ...
- EfficientNet学习笔记
EfficientNet是谷歌大脑在2019年提出的,论文地址是:https://arxiv.org/pdf/1905.11946.pdf 这篇文章主要想解决的一个问题是,如何平衡网络的深度.宽度和分 ...
- Linux课程学习 第二课
工欲善其事,必先利其器 虚拟机安装(链接中有详细的操作方法,这里就不再详细说明了,但有注意事项,会在下文中截图标注) https://www.linuxprobe.com/ 注:为了避免是权限问题导 ...