使用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创建可删除添加行的动态表格，超级简单实用的方法的更多相关文章

  1. jQuery创建、删除和修改html标签

    1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...

  2. ubuntu创建、删除文件及文件夹，强制清空回收站方法

    mkdir 目录名         => 创建一个目录 rmdir 空目录名      => 删除一个空目录 rm 文件名 文件名   => 删除一个文件或多个文件 rm –rf 非 ...

  3. (转载)ubuntu创建、删除文件及文件夹，强制清空回收站方法

    mkdir 目录名         => 创建一个目录 rmdir 空目录名      => 删除一个空目录 rm 文件名 文件名   => 删除一个文件或多个文件 rm –rf 非 ...

  4. jquery创建一个新的节点对象(自定义结构/内容)的好方法

    jq创建一个新的节点对象,这对一些自定义功能很有帮助,而且可以随意控制对象的结构与内容,何乐而不为呢,看到这里,相信有些朋友已经按耐不住了,好记下来为大家介绍实现方法,感兴趣的朋友可以了解下哦 < ...

  5. jquery: json树组数据输出到表格Dom树的处理方法

    项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...

  6. WPF 中动态创建和删除控件

    原文:WPF 中动态创建和删除控件 动态创建控件 1.容器控件.RegisterName("Name",要注册的控件)   //注册控件 2.容器控件.FindName(" ...

  7. 3、File类之创建、删除、重命名、判断方法

    一般我们调用内置类的方法,都是指调用其成员方法,故而以下几种方法都是File类的成员方法,常用的有以下3种, 分别是 //创建 public boolean createNewFile() publi ...

  8. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  9. jQuery 节点操作（创建 插入 删除 复制 替换 包裹）

    一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...

随机推荐

  1. 18 Python之初识面向对象

    1. 类与对象 class Car: #类名首字母大写,严格遵守驼峰命名规范 pass #造车 c = Car() #类名() #创建对象 ##出场之后进行改装 c.color = "红色& ...

  2. Slimvoice快速而小巧

    这可行吗?绝对没问题.完全加载的最大页面只有230 KB.因为所有内容都被缓存和压缩,所以随后查看的每个页面只有大约6 KB,这比我见过的具有相同功能的SPA要小得多. Slimvoice快速而小巧, ...

  3. linux 之实现定时任务

    一.方式一 (1)命令行 的方法: 一.方式一 需求:每分钟执行一次/etc 目录的添加 到/tmp/a.txt 中 (1) touch a.txt创建文件 (2) crotab -e 进行任务的定制 ...

  4. 仿造email后缀搜索功能（2）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. javaee 自定义标签实战

    用过javaee标准标签库的里的标签应该都知道,标签的存在使得页面上的jsp脚本大大减少,甚至说没有了,大大提高了工作效率,使得页面的整洁性也有了很大的提高.下面我们就 模仿核心标签库中choose标 ...

  6. lftp连接异常情况分析过程

    [问题现象]:通过rpm安装好lftp后,执行lftp huangmr:huangmr@192.168.107.132无法连接(lftp huangmr@192.168.107.132:~> l ...

  7. maven中配置jboss仓库

    有两种方式,一种是在项目的pom.xml中<repositories>中添加,这是配置是针对具体的某一个项目,更多时候,我们想把jboss仓库作为所有项目的仓库,这就需要在maven的se ...

  8. 牛客练习赛26 E-树上路径 （树链剖分+线段树）

    链接:https://ac.nowcoder.com/acm/contest/180/E 来源:牛客网 树上路径 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语 ...

  9. .htaccess防盗链方法（文件、图片）

    http标准协议中有专门的字段记录referer,一来可以追溯上一个入站地址是什么,二来对于资源文件,可以跟踪到包含显示他的网页地址是什么. 因此所有防盗链方法都是基于这个Referer字段两种方法: ...

  10. Java 实现《编译原理》简单-语法分析功能-LL(1)文法 - 程序解析

    Java 实现<编译原理>简单-语法分析功能-LL(1)文法 - 程序解析 编译原理学习,语法分析程序设计 (一)要求及功能 已知 LL(1) 文法为: G'[E]: E→TE' E'→+ ...