使用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. 使用GPU训练TensorFlow模型

    查看GPU-ID CMD输入: nvidia-smi 观察到存在序号为0的GPU ID 观察到存在序号为0.1.2.3的GPU ID 在终端运行代码时指定GPU 如果电脑有多个GPU,Tensorfl ...

  2. mysql 相关文章

    <58到家MySQL军规升级版> <数据库索引,到底是什么做的?> <MyISAM与InnoDB的索引差异究竟是啥?> <InnoDB,为何并发如此之高?&g ...

  3. 编译LAMP部署动态网站环境

    LAMP动态网站部署架构是由一套 Linux+Apache+MySQL+PHP 组成的动态网站系统解决方案. 以下配置环境为:Linux=RHEL7 --> Apache=2.4.33 --&g ...

  4. 基于CentOS系统部署EPICS环境

    1.虚拟机安装CentOS系统2.打开终端,以root账户登录3.进入/usr/local目录下,新建文件夹epics,并进入该文件夹4.在/usr/local/epics目录下,执行wget htt ...

  5. Git复习（五）之多人协作、git push失败、git pull失败

    多人协作 多人协作时,大家都会往master和dev分支上推送各自的修改. 现在,模拟一个你的小伙伴,可以在另一台电脑(注意要把SSH Key添加到GitHub)或者同一台电脑的另一个目录下克隆: $ ...

  6. 小程序之textarea层级最高问题

    1.textarea位于底部固定定位按钮下方,会导致点击底部按钮,textarea获取到焦点. 解决方法如下 view与textarea之间在聚焦和失去焦点进行切换 cursor-spacing是te ...

  7. 解决stackoverflow加载慢的插件

    浏览stackoverflow的时候,比较慢,网上找到一个大神写的小工具 挺管用,给推荐下. gitthub地址: https://github.com/justjavac/ReplaceGoogle ...

  8. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  9. document.compatMode，quirks mode and standards mode

    Document.compatMode Indicates whether the document is rendered in Quirks mode or Standards mode. Syn ...

  10. 微擎后台进行GET提交

    微擎form表单进行GET提交时,要传递 name 分别为 c , a , m , do 的值 例如: <form action="{php echo $this->create ...