使用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. MySQL_入手<二>之删--改--查

    接上 上篇文章继续 查询 # 比较运算 # 根据WHERE条件查找数据: = > < >= <= != select * from t_hero where age < ...

  2. split、paste命令

    一.split分割文件 语法       split [OPTION] ... [INPUT [PREFIX]] 描述       将固定大小的INPUT输出到PREFIXaa,PREFIXab,.. ...

  3. jinja2介绍

    jinja2介绍 jinja2是Flask作者开发的一个模板系统,起初是仿django模板的一个模板引擎,为Flask提供模板支持,由于其灵活,快速和安全等优点被广泛使用. jinja2的优点 jin ...

  4. 修改公司VS_UCOS工程BUG调试过程说明

    说明:公司里的工程中,使用VS_UCOS来调试应用程序.业务逻辑.方法是嵌入式和VS分别建一个工程,把底层驱动部分分别添加各自需要的源文件,头文件使用同一个.也就是嵌入式的驱动函数名和参数和VS的函数 ...

  5. Box-shadow制作漂亮的外阴影输入框

    背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...

  6. EJS学习（二）之语法规则上

    标签含义 <% %> :'脚本' 标签,用于流程控制,无输出即直接使用JavaScript语言. <%= %>:转义输出数据到模板(输出是转义 HTML 标签)即在后端定义的变 ...

  7. ubuntu修改apt源

    1.修改之前首先做好备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑源列表文件 sudo vim /etc/apt/sou ...

  8. Java程序员常用的Linux命令01——linux命令基础

    1.显示日期的命令date 显示日期: [root@localhost ~]# date 显示年月日: [root@localhost ~]# date '+%Y%m%d' 2.显示日历指令cal 显 ...

  9. Gh0st与云安全

    黑产攻击途径升级,云服务成重灾区 在我们的印象里,黑产以及相关的肉鸡DDOS攻击总是离我们很远.可实际情况并非如此,特别是在云服务大行其道的今天. 日前,腾讯反病毒实验室就观察到了国内云服务中Gh0s ...

  10. Python之路：进程、线程

    目录 一.进程与线程区别 1.1 什么是线程 1.2 什么是进程 1.3 进程与线程的区别 二.Python GIL全局解释器锁 三.线程 3.1 threading模块 3.2 Join & ...