使用jQuery创建可删除添加行的动态表格,超级简单实用的方法
使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>元素的添加与删除</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="jquery-1.10.1.js"></script>
</head>
<body>
<form>
<table border="1px" width="200px" id="table1">
<tr style="height: 20px">
<td>0</td>
<td ><input type="button" οnclick="add(this);" value="添加"></td>
</tr>
<tr style="height: 20px">
<td>1</td>
<td ><input type="button" οnclick="del(this);" value="删除"></td>
</tr>
<tr id="tr2" style="height: 20px">
<td>2</td>
<td ><b οnclick="del(this);">删除</b></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
var i=3;
function del(e) { $(e).parent().parent().remove();
i--;
} function add() { $("#table1").append("<tr style=\"height: 20px\">\n" +
" <td>"+i+"</td>\n" +
" <td ><input type=\"button\" οnclick=\"del(this);\" value=\"删除\"></td>\n" +
" </tr>")
i++;
} </script>
</html>
使用jQuery创建可删除添加行的动态表格,超级简单实用的方法的更多相关文章
- jQuery创建、删除和修改html标签
1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...
- ubuntu创建、删除文件及文件夹,强制清空回收站方法
mkdir 目录名 => 创建一个目录 rmdir 空目录名 => 删除一个空目录 rm 文件名 文件名 => 删除一个文件或多个文件 rm –rf 非 ...
- (转载)ubuntu创建、删除文件及文件夹,强制清空回收站方法
mkdir 目录名 => 创建一个目录 rmdir 空目录名 => 删除一个空目录 rm 文件名 文件名 => 删除一个文件或多个文件 rm –rf 非 ...
- jquery创建一个新的节点对象(自定义结构/内容)的好方法
jq创建一个新的节点对象,这对一些自定义功能很有帮助,而且可以随意控制对象的结构与内容,何乐而不为呢,看到这里,相信有些朋友已经按耐不住了,好记下来为大家介绍实现方法,感兴趣的朋友可以了解下哦 < ...
- jquery: json树组数据输出到表格Dom树的处理方法
项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...
- WPF 中动态创建和删除控件
原文:WPF 中动态创建和删除控件 动态创建控件 1.容器控件.RegisterName("Name",要注册的控件) //注册控件 2.容器控件.FindName(" ...
- 3、File类之创建、删除、重命名、判断方法
一般我们调用内置类的方法,都是指调用其成员方法,故而以下几种方法都是File类的成员方法,常用的有以下3种, 分别是 //创建 public boolean createNewFile() publi ...
- 最简单实用的JQuery实现banner图中的text打字动画效果!!!
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- jQuery 节点操作(创建 插入 删除 复制 替换 包裹)
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
随机推荐
- CentOS 7 yum安装LAMP,LNMP并搭建WordPress个人博客网站
本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [root@Shining ~] ...
- HTML5-placeholder属性
HTML 5<input> placeholder属性 placeholder属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. ...
- Mysql学习(二)之安装、开启自启、启动、重启、停止
安装 方法一:通过homebrew brew install mysql 方法二:通过官网dmg文件安装(Mac) https://dev.mysql.com/downloads/mysql/ 通过h ...
- springboot页面模板thymeleaf的简单用法
thymeleaf基础语法: 变量输出与字符串操作: th:text 表示在页面输出值 th:value 表示将一个值放入input标签的value中 判断字符串是否为空: thymele ...
- performance面板使用,以及解决动画卡顿
https://googlechrome.github.io/devtools-samples/jank// 官方案例 https://juejin.im/post/5b65105f518825 ...
- 北京化妆时尚气息自适应CSS例子
三里屯太古广场——北京化妆时尚气息的先锋阵地! “乐色起义”创意化妆设计大赛——国内最具创意的公益设计大赛! CNature——国内最具个性的时尚环保公益组织! 一个多么奇妙的组合!就在2010年的这 ...
- js中自然日的计算
需求:前端取后端返回的时间与当前时间进行比较展示,展示规则: 1.返回的时间跟当前时间同年同月同日 显示 今天 2.返回的时间与当前时间相差在7天以内 显示 某天前 3.返回的时间与当前时间相差大于7 ...
- java中的Enum在@RestController(@ResponseBody) 注解下返回的表现
参考文档 枚举 public enum CouponType { PLATFORM("平台优惠券"), NEWCOMER("新人专享优惠券"), INVITE( ...
- TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈
TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈 本文对TVM的论文进行了翻译整理 深度学习如今无处不在且必不可少.这次创新部分得益于可扩展的深度学习系统,比如 TensorFlo ...
- 使用redislive监控redis
redis监控工具redislive的安装 1. pip安装 如果主机没有pip先安装pip工具 wget --no-check-certificate https://github.com/pypa ...