使用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. python协程gevent案例：爬取斗鱼美女图片

    分析 分析网站寻找需要的网址 用谷歌浏览器摁F12打开开发者工具,然后打开斗鱼颜值分类的页面,如图: 在里面的请求中,最后发现它是以ajax加载的数据,数据格式为json,如图: 圈住的部分是我们需要 ...

  2. solr学习笔记-导入mysql数据

    操作系统:LINUX CENTOS 6.7 solr安装目录:/usr/local/solr-6.1.0 1.准备工作: 1.1.创建数据表: CREATE TABLE `mytable` ( `id ...

  3. Azure中配置和发布 Nginx docker到互联网

    当Azure build一个Niginx docker 镜像时,无法通过浏览器访问这个镜像,于是想到了把这个网站发布到互联网中,这样就能验证网站是否正确. 本问跳过如何创建Azure Ubantu的虚 ...

  4. git取消操作命令

    1,移除git add . 的内容 git reset HEAD 2,移除git commit 的内容(commit_A是文件名) git rebase -i commit_A

  5. calc,support,media各自的含义及用法

    @support:用于检测浏览器是否支持CSS某个属性,即条件判断,如果支持某个属性,可以写一套样式,如果不支持某属性,提供另一套样式作为替补. calc():用于计算动态函数值,支持“+”,“-”, ...

  6. pycharm terminal打开在虚拟环境

    pycharm调试是虚拟环境,terminal不是虚拟环境,搞了好久,原来需要激活一下 cd   venv\Scripts> 去虚拟环境的Script目录下,运行activate.bat激活环境 ...

  7. 使用 java 创建你的第一个区块链（第二部分）

    本系列教程的目的是帮助您了解如何开发区块链技术. 在这第二个教程中,我们将: 创建一个简单的钱包: 使用我们的区块链发送已签名的交易: 感觉更酷. 以上这些将使我们拥有自己的加密货币! 从上一个教程开 ...

  8. 从Spring看Web项目开发

    之前简单介绍过Spring框架,本文换个角度重新诠释Spring.使用Java语言开发的项目,几乎都绕不过Spring,那么Spring到底是啥,为何被如此广泛的应用,下面从以下两个问题出发来剖析Sp ...

  9. python tkinter 基本使用

    这里只放表格和一个控件基本属性 grid(**options) 属性-- 下方表格详细列举了各个选项的具体含义和用法: 选项 含义column 1. 指定组件插入的列(0 表示第 1 列)2. 默认值 ...

  10. Ceph实战入门之安部署篇

    最近Ceph官方发布了luminous长久支持版,新版本增加了很多有意思的功能,但是入门还是先从部署安装开始. 环境说明 在Win10下安装VMware® Workstation 12 Pro软件,用 ...