使用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. linux基础命令<二>

    1.关机 init 0   poweroff   halt  shutdown –h   now 2.重启 init 6   reboot  shutdown –r now 3.查询都有那些用户在系统 ...

  2. 爬取快代理的免费IP并测试

    各大免费IP的网站的反爬手段往往是封掉在一定时间内访问过于频繁的IP,因此在爬取的时候需要设定一定的时间间隔,不过说实话,免费代理很多时候基本都不能用,可能一千个下来只有十几个可以用,而且几分钟之后估 ...

  3. linux入门到高级

    目  录 1. Linux入门篇.................................................................................... ...

  4. Stream 分布式数据流的轻量级异步快照

    1. 概述 分布式有状态流处理支持在云中部署和执行大规模连续计算,主要针对低延迟和高吞吐量.这种模式的一个最根本的挑战就是在可能的失败情况下提供处理保证.现有方法依赖于可用于故障恢复的周期性全局状态快 ...

  5. 03 python3常见内置函数

    数学相关 abs(a) : 求取绝对值.abs(-1) max(list) : 求取list最大值.max([1,2,3]) min(list) : 求取list最小值.min([1,2,3]) su ...

  6. Centos7:tomcat8.5安装,配置及使用

    1.解压缩 2.启动 ./startup.sh//启动 ./shutdown.sh//关闭 tail -f ../logs/catalina.out//查看日志

  7. css--内凹圆角

    <div class="box"></div> :root { --r: 2em; } .box { overflow: hidden; position: ...

  8. Java操作FTP,从FTP上读取指定文件,把指定文件上传到FTP

    需要添加的依赖 <!-- https://mvnrepository.com/artifact/commons-net/commons-net --> <dependency> ...

  9. mysql5.7主从复制及相关注意点！

    首先在两台不同IP的服务器安装相同版本的mysql(也可以docker 用 network模式).例如 主数据库(master) 178.18.0.2 my.cnf的设置(一般在/etc/mysql/ ...

  10. Delphi 处理异常情况